Question

我正在使用离子3，并像使用ngFor一样循环离子卡。我想知道当用户点击每个离子卡中的like /不同按钮而不重新加载列表时，我如何与用户做出反应。

<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)，请参阅{{3}上的答案有关详细信息。）

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

像离子3中每种元素的反应一样

1 个答案: