【发布时间】:2018-12-31 17:26:13
【问题描述】:
我有一个显示所有兴趣的 ngFor 循环。接下来我有一个 ngIf 语句,它检查用户是否已经从 user_interests 页面添加了兴趣作为他的兴趣。我有 2 种方法我尝试过,但似乎无法正确。
方法一
首先,我加载了所有兴趣并将兴趣 id 传递给函数 myInterests,如果用户将该兴趣添加到他们的兴趣中,该函数返回 true/false 下一步在模板文件中我这样做了
<div class="interest card" *ngFor="let interest of interests" margin-bottom>
<!--slides-->
<ion-slides class="to-top" pager>
<ion-slide>
<img [src]="interest.interest_img" alt="" class="img">
</ion-slide>
</ion-slides>
<p class="secondary"> {{interest.interest_detail}}</p>
<div class="oba" *ngIf="myInterests(interest.interest_id) =='false'; else showRemove">
<button ion-button icon-start block color="dark" tappable (click)="addInterest(interest.id)">
<ion-icon name="add"></ion-icon> Follow </button>
</div>
<ng-template #showRemove>
<div color="dark" class="button" tappable (click)="removeInterest(interest.id)" >
<ion-icon name="minus">UnFollow </ion-icon>
</div>
</ng-template>
</div>
myInterests(iid) 是一个从 api 返回 true 或 false 的函数。
问题是这个循环永远显示加载器。
方法二
我只是将所有兴趣和用户兴趣加载为数组 allInterests 和 myInterests。接下来在模板文件中,我还不知道如何检查用户的兴趣是否等于对数组的兴趣
说类似<div *ngIf="interest.interest_id in array myinterests.interest_id; else showRemove">
下面是函数
`所有利益(){
让 loader = this.loading.create({
content: 'Processing please wait…',
});
loader.present();
this.apiProvider.allInterests()
.then(data => {
this.interets = data;
console.log('all returns: ', data);
});
loader.dismiss();
}
myInterests(iid) {
let loader = this.loading.create({
content: 'Processing please wait…',
});
loader.present();
this.storage.get('userInfo').then((uInfo)=>{
if (uInfo.id != null) {
let userid = uInfo.id;
this.apiProvider.checkInterests(userid, iid)
.then(data => {
this.myinterests = data;
console.log('my return: ', data);
return data;
});
}
});
loader.dismiss();
}` <br>
控制台能够显示所有返回但挂在那里。这意味着(我猜)它没有到达 myInterests() 函数。但是,如果我从 if 条件中删除该功能,至少会显示兴趣
【问题讨论】:
-
您是否检查过 myInterests() 函数是否从 ngFor 获取输入并返回任何值?我的意思是有两种可能性,其中一种是 myInterests() 函数不能正常工作或无法访问,第二种可能是使用 ngIf。
-
正是我认为的@ShahriyarMammadli 我已经编辑以包含这些功能。
-
正如我在回答中提到的,如果您的功能确实有效,那么提供的 html 也应该有效。我测试了它。如果仍有问题,请回复。
标签: ionic3 ngfor angular-ng-if