使用 Angular2 单击更改图像

Question

我试图在单击列表时更改列表的心形图像，但每次单击列表中的所有其他心形图像时也会更改。

这是我的列表的屏幕截图：

这是 html 列表：

<ul class="list-group">
  <li 
    class="list-group-item" 
    *ngFor="let film of items">
    {{film.text}}
    <img 
      [src]="imgSrc" 
      (click)="fav(film.text)" 
      class="heart">
    <img 
      (click)="delete(film.text)" 
      class="deletebtn" 
      src="/assets/images/delete.png">
  </li>
</ul>

以及组件中的函数：

imgSrc: string = "../../assets/images/heartnotclicked.png";
wasClicked = false;

fav(film) {
  if (this.wasClicked === false) {
    this.wasClicked = true;
    this._filmService.addFavFilms(film);
    this.imgSrc = "../../assets/images/heart.png";
  } else {
    this.wasClicked = false;
    console.log(this.wasClicked);
    this._filmService.deleteFav(film.text);
    this.imgSrc = "../../assets/images/heartnotclicked.png";
  }
}

Answer 1

Image src & wasClicked 属性应该是影片对象的一部分，即 film.imgSrc，它将更新特定的行。目前您正在维护一个属性，它将更新所有项目。

<ul class="list-group">
    <li class="list-group-item" *ngFor="let film of items" >{{film.text}}
        <img [src]="film.imgSrc" (click)="fav(film)" class="heart"> 
        <img (click)="delete(film.text)" class="deletebtn"src="/assets/images/delete.png">
    </li>
</ul>

分量：

imgSrc: string = "../../assets/images/heartnotclicked.png";
wasClicked = false;
fav(film){
  if(film.wasClicked === false){
    film.wasClicked = true;
    this._filmService.addFavFilms(film);
    film.imgSrc = "../../assets/images/heart.png";   
  }
  else {
    film.wasClicked = false;
    console.log(film.wasClicked);
    this._filmService.deleteFav(film.text);
    film.imgSrc = "../../assets/images/heartnotclicked.png";
  }
}

使用 Angular2 单击更改图像

Change image on click using Angular2

html

css

angular

angular2-forms

angular2-services