Как получить значение .ts var в * ngIf HTML? - PullRequest
Новая
       8

Как получить значение .ts var в * ngIf HTML?

0 голосов
/ 16 октября 2019

Я пытаюсь отобразить изображения все 2 секунды, мне удалось сначала отобразить их все.

Вот моя строка HTML: 

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

И мой метод .ts: 

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

с: 

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"),
];
}

Кстати, он отображался с * ngFor, но ядумаю, я должен использовать * ngIf здесь ..

Я также пытался: 

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

но не работает .. Большое спасибо!

1 Ответ

1 голос
/ 16 октября 2019

Ваш код выглядит хорошо по большей части, я настроил некоторые места. единственная пара проблем, которые могут возникнуть, это неправильный путь к изображению, который, вероятно, должен начинаться с '/assets/img/photo_bonhommes/BH1.jpg' и определенно не должен иметь двух расширений. И еще будет то, что ваш конструктор класса Bh создает класс, но вы не назначаете и не выставляете идентификатор правильно. 

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>
...