ngIF 在 Ionic4 中一直循环答案

【问题标题】：ngIF keeps looping forever in Ionic4ngIF 在 Ionic4 中一直循环
【发布时间】：2020-01-06 18:29:36
【问题描述】：

我正在开发一个具有聊天组功能的聊天应用程序。我创建了“创建新组”和“编辑现有组”页面。在我的“编辑组”页面中，我正在加载所有用户列表并检查成员是否已经存在于组中，以便提供添加或删除现有成员以及新成员的功能。我的代码是这样的：

edit-group.page.html

//Here I have around 150 friends/total users
<ion-item *ngFor="let friend of friends | friendFilter: searchFriend">
    <ion-avatar slot="start">
        <img src="{{ friend.photoURL }}" onError="this.src='./assets/img/default-dp.png'"/>
    </ion-avatar>
    <ion-label>
        <h2>{{ friend.fullName }}</h2>
        <p class="emailCustom">{{ friend.email }}</p>
    </ion-label>

//****This is where I am facing problem. 
//**** This buttons are add or remove members. Notice here my *ngIF statement! 

    <ion-button fill="clear" slot="end" color = "light" (click)="addToGroup(friend); $event.stopPropagation()" *ngIf="!inGroup(friend) && checkadmin()">
        <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
    <ion-button fill="clear" slot="end" color = "light" (click)="removeFromGroup(friend); $event.stopPropagation()" *ngIf="inGroup(friend) && checkadmin()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
    </ion-button>
</ion-item>

注意离子按钮中的*ngIf 状态。

这个*ngIf 通过inGroup() 函数检查朋友是否已经是组的成员，它还使用checkadmin() 函数检查朋友在哪里是管理员。

我的功能如下：

edit-group.page.ts

inGroup(friend) {
    //Currently this.groupMembers.lenth is 3 but this function is called 150 times as I have 150 users
    for (var i = 0; i < this.groupMembers.length; i++) {  
      console.log("Kartik In Group Count: " + i);
      if (this.groupMembers[i].$key == friend.$key) {
        return true;
      }
    }
    return false;
  }

  checkadmin() {
    if (this.group.admin == this.afAuth.auth.currentUser.uid) {
      return true;
    } else {
      return false;
    }
  }

所以发生的事情是，我总共有 150 个用户在 html 的 ion-item 中循环遍历 *ngFor="let friend of friends"。对于每个朋友，检查inGroup(friend) 和checkadmin() 函数。

现在，一旦页面加载，我的应用就会永远陷入循环。 inGroup() 和 checkAdmin() 函数不断循环通过 *ngIf。知道我在这里做错了什么吗？？？？

【问题讨论】：

标签： angular loops ionic-framework angular-ng-if

【解决方案1】：

假设您在浏览器中没有任何控制台错误并且您有可用的数据，我真的不能说是什么问题。

但我会使用*ngIf else 来呈现 HTML 并更新我的代码，如下所示：

 <ion-button fill="clear" slot="end" color = "light" (click)="removeFromGroup(friend); $event.stopPropagation()" *ngIf="inGroup(friend) && checkadmin(); else notInGroup">
        <ion-icon slot="icon-only" name="close"></ion-icon>
    </ion-button>

<ng-template #notInGroup
<ion-button fill="clear" slot="end" color = "light" (click)="addToGroup(friend); $event.stopPropagation()">
            <ion-icon slot="icon-only" name="add"></ion-icon>
        </ion-button>
</ng-template>

还可以使用 lodash 函数或 java script some 将您的 inGroup(friend) 更新为类似这样：

inGroup(friend) {
    return _.some(this.groupMembers, (member) => member.$key === friend.$key);
}

并且 checkadmin 可以是您的 OnInit 中的布尔集并在 *ngIf 中使用：

boolean isAdmin  = (this.group.admin === this.afAuth.auth.currentUser.uid)

【讨论】：

它仍然继续在 inGroup() 函数内部循环:(
您看到任何错误吗？您能否创建一个包含示例数据的 stackblitz 示例供我们检查？

【解决方案2】：

最好避免使用*ngIf 中的方法，因为变量不会有任何性能问题，因为它直接针对变量进行检查，而该方法将使用更改检测并且会被多次触发。

因此，在从您的响应中获取数据后尝试创建一些变量，例如isAdmin：

<ion-button fill="clear" slot="end" color = "light" 
    (click)="removeFromGroup(friend); $event.stopPropagation()" 
    *ngIf="friend?.isAdmin">
    <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

【讨论】：