How to get .ts var value in *ngIf HTML?

Question

I am trying to display images all 2 seconds, I managed to display them all first.

Here is my HTML line :

<img id="bh" routerLink="/" *ngIf="bh?.id == count" [src]="bh?.src" height="42" width="42"/>

And my .ts method :

  Timer(){
  setInterval(() => {
    this.count=this.count++
  }, 2000)
}

with :

export class HeaderComponent implements OnInit{
count=0

BHs = [
  new Bh (1, "assets/img/photo_bonhommes/BH1.jpg.png"),
  new Bh (2, "assets/img/photo_bonhommes/BH2.png"),
  new Bh (3, "assets/img/photo_bonhommes/BH3.png"),
  new Bh (4, "assets/img/photo_bonhommes/BH4.png"),
  new Bh (5, "assets/img/photo_bonhommes/BH5.png"),
  new Bh (6, "assets/img/photo_bonhommes/BH6.png"),
  new Bh (7, "assets/img/photo_bonhommes/BH7.png"),
  new Bh (8, "assets/img/photo_bonhommes/BH8.png"),
  new Bh (9, "assets/img/photo_bonhommes/BH9.png"),
  new Bh (10, "assets/img/photo_bonhommes/BH10.png"),
  new Bh (11, "assets/img/photo_bonhommes/BH11.png"),
];
}

Btw it was displaying with *ngFor but I guess I have to use *ngIf here..

I also tried :

<img id="bh" routerLink="/" *ngIf="bh?.id == this.count" [src]="bh?.src" height="42" width="42"/>

but not working.. Thank you very much !

Answer 1

Your code looks good for the most part, I adjusted some places. the only couple of more problems that it could be, is the wrong picture path, which probably should start with '/assets/img/photo_bonhommes/BH1.jpg' and definitely shouldn't have two extensions. And another would be that your Bh class constructor creates the class but you don't assign and expose the id properly.

export class HeaderComponent implements OnInit{
count=0

BHs = [
  new Bh(1, "/assets/img/photo_bonhommes/BH1.jpg"),
  new Bh(2, "/assets/img/photo_bonhommes/BH2.png"),
  new Bh(3, "/assets/img/photo_bonhommes/BH3.png"),
  new Bh(4, "/assets/img/photo_bonhommes/BH4.png"),
  new Bh(5, "/assets/img/photo_bonhommes/BH5.png"),
  new Bh(6, "/assets/img/photo_bonhommes/BH6.png"),
  new Bh(7, "/assets/img/photo_bonhommes/BH7.png"),
  new Bh(8, "/assets/img/photo_bonhommes/BH8.png"),
  new Bh(9, "/assets/img/photo_bonhommes/BH9.png"),
  new Bh(10, "/assets/img/photo_bonhommes/BH10.png"),
  new Bh (11, "/assets/img/photo_bonhommes/BH11.png"),
];
}
ngOnInit() {
 Timer(){
  setInterval(() => {
    this.count++
  }, 2000)
 }
}

--------------------HTML----------------
<ng-container *ngFor="let bh of BHs">
  <img id="bh" routerLink="/" *ngIf="bh.id === count" [src]="bh.src" height="42" 
   width="42"/>
</ng-container>