Ionic framework 离子3中各元素的类反应

我正在使用离子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>

{{u.name}

喜欢
不像

您可以使用

*ngIf

操作符。这不会像

hidden

属性那样隐藏元素，但实际上会从DOM中删除元素

（将

u.islike

转换为

布尔值

，因为我认为这样更干净，个人偏好。还将

（单击）

更改为

（点击）

，有关详细信息，请参阅上的答案。）

---

在您当前的代码中，什么不起作用？或者，如果此代码工作正常，您希望如何“与用户反应”？@Ivaro18我可以喜欢/不喜欢，但当我单击“喜欢”按钮时，我需要更改为“不喜欢”按钮。如果单击“不喜欢”按钮，需要更改为“喜欢”按钮，如何在不重新加载列表的情况下执行此操作？如果用户数组很大，for循环是否会成为瓶颈？您可以使用

.filter

或其他功能，但for循环是最快的方法。请看，但我建议不要加载一个非常大的用户列表，您可能希望查看爱奥尼亚的无限滚动，并将您的用户作为一个碎片列表检索。

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

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