【问题标题】:ionic 3 check if value exist in an array in ngfor loopionic 3检查ngfor循环中的数组中是否存在值
【发布时间】: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。接下来在模板文件中,我还不知道如何检查用户的兴趣是否等于对数组的兴趣
说类似&lt;div *ngIf="interest.interest_id in array myinterests.interest_id; else showRemove"&gt;

下面是函数
`所有利益(){ 让 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


【解决方案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>

这应该可以如你所愿。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-11-07
    • 1970-01-01
    • 2019-01-31
    • 1970-01-01
    • 1970-01-01
    • 2016-11-08
    相关资源
    最近更新 更多