ionic 3中每个元素的类似反应

Question

我正在使用 ionic 3，并且像使用 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 tap vs click 上的答案。）

<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;
    }
  }
}