Angular表格行按钮显隐依赖行数据，*ngIf调用方法致无限执行求解

我正在开发一个展示MongoDB所有用户的表格，用户可点击行内按钮关注/取消关注其他用户。需求是：当前用户已关注该行用户时显示“取消关注（Ontvolgen）”按钮，否则显示“关注（Volgen）”按钮。

现在遇到的问题是：在ngIf表达式里调用isFollowing(id: string)方法时，这个方法被无限调用。我知道Angular会多次重新计算ngIf表达式，在*ngIf里用方法不是最佳实践，通常建议用布尔变量替代，但因为按钮依赖ngFor循环的行数据，不知道该怎么处理。

现有代码 #

isFollowing方法（user-list.component.ts） #

//check if the current user already follows the other user
isFollowing(otherUser: string | undefined): boolean {
  console.log('isFollowing called from user-list.component.ts');
  if (otherUser === undefined) {
    SweetAlert.showErrorAlert('Er gaat iets mis, probeer het opnieuw..');
    return false;
  }
  if (this.currentUser.followingUsers?.includes(otherUser)) {
    SweetAlert.showSuccessAlert('Je hebt deze gebruiker ontvolgt.');
    return true;
  }
  SweetAlert.showErrorAlert('Er gaat iets mis, probeer het opnieuw..');
  return false;
}

HTML模板代码 #

<tbody *ngIf="users.length > 0">
  <tr *ngFor="let user of filteredUsers; let i = index">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ user.firstName | titlecase }}</td>
    <td>{{ user.lastName | titlecase }}</td>
    <td>{{ user.city | titlecase }}</td>
    <td *ngIf="isUser && !isFollowing(user._id)">
      <a
        (click)="followUser(user._id)"
        class="btn customfriendbutton"
      >
        Volgen
      </a>
    </td>
    <td *ngIf="isUser && isFollowing(user._id)">
      <a
        (click)="unfollowUser(user._id)"
        class="btn customfriendbutton"
      >
        Ontvolgen
      </a>
    </td>

    <td *ngIf="isAdmin">
      <a
        (click)="sweetAlertDeleteConfirmation(user._id)"
        class="btn customdeletebutton"
      >
        Verwijderen
      </a>
    </td>
  </tr>
</tbody>

解决方案 #

1. 新增关注状态映射对象 #

在组件中定义一个对象，专门存储每个用户的关注状态，避免渲染时重复计算：

followStatusMap: { [userId: string]: boolean } = {};

2. 批量初始化关注状态 #

在获取用户列表、当前用户数据，或者filteredUsers更新后，批量计算并初始化所有用户的关注状态：

initFollowStatus() {
  this.followStatusMap = {};
  this.filteredUsers.forEach(user => {
    if (user._id) {
      this.followStatusMap[user._id] = this.currentUser.followingUsers?.includes(user._id) || false;
    }
  });
}

调用时机：可放在ngOnInit、用户数据加载完成回调，或者filteredUsers变化的监听逻辑中。

3. 修改模板，用状态变量替代方法调用 #

把模板中isFollowing(user._id)的调用替换为followStatusMap[user._id]：

<tbody *ngIf="users.length > 0">
  <tr *ngFor="let user of filteredUsers; let i = index">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ user.firstName | titlecase }}</td>
    <td>{{ user.lastName | titlecase }}</td>
    <td>{{ user.city | titlecase }}</td>
    <td *ngIf="isUser && !followStatusMap[user._id]">
      <a
        (click)="followUser(user._id)"
        class="btn customfriendbutton"
      >
        Volgen
      </a>
    </td>
    <td *ngIf="isUser && followStatusMap[user._id]">
      <a
        (click)="unfollowUser(user._id)"
        class="btn customfriendbutton"
      >
        Ontvolgen
      </a>
    </td>

    <td *ngIf="isAdmin">
      <a
        (click)="sweetAlertDeleteConfirmation(user._id)"
        class="btn customdeletebutton"
      >
        Verwijderen
      </a>
    </td>
  </tr>
</tbody>

4. 操作后同步更新状态 #

在followUser和unfollowUser方法执行成功后，直接更新followStatusMap的对应值，无需重新计算整个列表：

followUser(userId: string) {
  // 原有API调用逻辑...
  // 调用成功后更新状态
  this.followStatusMap[userId] = true;
  // 同步更新currentUser的关注列表（如果需要）
  if (!this.currentUser.followingUsers) {
    this.currentUser.followingUsers = [];
  }
  this.currentUser.followingUsers.push(userId);
}

unfollowUser(userId: string) {
  // 原有API调用逻辑...
  // 调用成功后更新状态
  this.followStatusMap[userId] = false;
  // 同步更新currentUser的关注列表（如果需要）
  if (this.currentUser.followingUsers) {
    this.currentUser.followingUsers = this.currentUser.followingUsers.filter(id => id !== userId);
  }
}

5. 清理原方法的冗余逻辑 #

原isFollowing方法中每次调用都会弹出提示，这会因Angular的变更检测频繁触发弹窗，现在可以删除该方法，或保留为工具方法并移除弹窗：

// 可选：保留为工具方法
isFollowing(otherUser: string | undefined): boolean {
  if (!otherUser) return false;
  return this.currentUser.followingUsers?.includes(otherUser) || false;
}

内容的提问来源于stack exchange，提问作者MisterQvD