离子3中每个元素的类似反应 [英] Like reaction in each element in ionic 3
问题描述
我正在使用ionic 3,并且像使用ngFor一样循环使用离子卡.我想知道当用户在不重新加载列表的情况下单击每个离子卡中的喜欢/不喜欢"按钮时如何与用户反应.
I am using ionic 3, and looping ion-card with like using ngFor. I want to know how can I react with the user when user click the like/unlike button in each ion-card without reload the list.
<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>
推荐答案
您可以使用*ngIf
运算符.这不会像hidden
属性那样隐藏元素,而是实际上从DOM中删除了该元素.
You can make use of the *ngIf
operator. This won't hide the element like the hidden
property, but actually removes the element from the DOM.
(将u.isLiked
制成boolean
,因为我认为这样更清洁,个人喜好.也将(click)
更改为(tap)
,请参见
(made u.isLiked
into a boolean
because I think it's cleaner that way, personal preference. Also changed (click)
to (tap)
, see the answer on ionic2 tap vs click for more details.)
<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中每个元素的类似反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!