Изменить изображение по клику с помощью Angular2 - PullRequest
Новая
       5

Изменить изображение по клику с помощью Angular2

0 голосов
/ 26 августа 2018

Я пытаюсь изменить образ сердца в списке, когда нажимаю на него, но каждый раз, когда я щелкаю, меняются и все остальные образы сердца в списке.

вот снимок экрана моего списка:

enter image description here

и вот список 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";
  }
}

1 Ответ

0 голосов
/ 26 августа 2018

Свойство 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";
  }
}
...