使用Angular2点击更改图像答案

【问题标题】：Change image on click using Angular2使用Angular2点击更改图像
【发布时间】：2019-02-01 03:29:00
【问题描述】：

当我点击它时，我试图更改列表的心形图像，但每次单击列表中的所有其他心形图像时也会发生变化。

这是我列表的屏幕截图：

这里是 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";
  }
}

【问题讨论】：

那是因为它们都指向同一个变量。

标签： html css angular angular2-forms angular2-services

【解决方案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";
  }
}

【讨论】：