Question

我有一个显示所有兴趣的ngFor循环。接下来，我有一个ngIf statemnt，它检查用户是否已经从user_interests页面将兴趣添加为兴趣。我尝试了2种方法，但似乎无法解决问题。

方法1 首先，我加载了所有兴趣并将兴趣ID传递给函数myInterests，如果用户已将兴趣添加到他们的兴趣中，则该函数将返回true / false。下一步是在模板文件中执行此操作

export function ABC(data,callback) { 
  return  function (dispatch, getState) {  
    var res=  dispatch(Balance(data));

    console.log("Balance status",res)

    //rest of code
    if(res){
    }

    ................
 }
}

export function Balance(data) {
  return function (dispatch, getState) {
    const url = `api/.../balances`;
     axios.post(`${url}`,
      data
    ).then(async function  (response) {

      if (response.data.remaing > 0) {
        return await true;
      }else{
        return await false;

      }

myInterests（iid）是一个从api返回true或false的函数。问题是这个循环永远显示加载程序。

方法2
我只是将所有兴趣和用户兴趣加载为数组allInterests和myInterests。接下来，在模板文件中，我还无法弄清楚如何检查用户兴趣是否等于数组中的兴趣
说类似<div class="interest card" *ngFor="let interest of interests" margin-bottom>  <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>

以下是功能
`allInterests（）{ 让loader = this.loading.create（{

<div *ngIf="interest.interest_id in array myinterests.interest_id; else showRemove">

控制台可以显示所有退货，但挂在那里。这意味着（我猜）它不会进入myInterests（）函数。但是如果我从if条件中删除该功能，至少会显示兴趣

Answer 1

我希望您的myInterests(id)函数能正常工作，并且如果用户添加了兴趣，则返回true。

<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)"> 
    <button ion-button icon-start block color="dark" tappable  (click)="addInterest(interest.id)">  
        <ion-icon name="add"></ion-icon> Follow </button> 
    </div>
    <ng-template *ngIf="myInterests(interest.interest_id)"> 
        <div color="dark" class="button" tappable (click)="removeInterest(interest.id)" > 
        <ion-icon name="minus">UnFollow </ion-icon> 
    </div>  
    </ng-template> 

</div>

这应该可以按照您的意愿工作。

ionic 3检查ngfor循环中的数组中是否存在值

1 个答案: