Как реакция в каждом элементе в ионном 3

Question

Я использую ionic 3, и зацикливаю ion-карту с помощью ngFor.Я хочу знать, как я могу реагировать на действия пользователя, когда пользователь нажимает кнопку «Нравится / не нравится» на каждой ионной карте без перезагрузки списка.

<ion-card *ngFor="let u of users">
   <p>{{u.name}}</p>
   <button ion-button [hidden]="u.isliked=='1'" (click)="like(u.id)">like</button>
   <button ion-button [hidden]="u.isliked!='1'" (click)="unlike(u.id)">unlike</button>
</ion-card>

Answer 1

Вы можете использовать оператор *ngIf.Это не скрывает элемент, такой как свойство hidden, но фактически удаляет элемент из DOM.

(превращает u.isLiked в boolean, потому что я думаю, что это чище, личные предпочтения).Также изменен (click) на (tap), см. Ответ на кран ionic2 против нажатия для получения более подробной информации.)

<ion-card *ngFor="let u of users">
   <p>{{u.name}}</p>
   <button ion-button *ngIf="u.isLiked" (tap)="like(u.id)">like</button>
   <button ion-button *ngIf="!u.isliked" (tap)="unlike(u.id)">unlike</button>
</ion-card>

И в вашем ts:

like(userId) {
  for(let user of this.users) {
    if(user.id == userId) {
        user.isLiked = true;
      }
   }
}

unlike(userId) {
  for(let user of this.users) {
    if(user.id == userId) {
      user.isLiked = false;
    }
  }
}