Angular模板中如何用*ngIf判断用户ID是否在白名单数组中？

我来帮你把这个需求落地，先纠正一下你模板里的小问题，再给你两种靠谱的实现方式：

方法一：直接在模板中使用数组的includes()方法 #

Angular模板支持直接调用数组的原生方法，你可以用whiteListIDs.includes(user.id)来判断用户ID是否在白名单里。另外你原来的#else写法不对，Angular的*ngIf...else需要用<ng-template>来定义else区块，具体代码如下：

<div *ngFor="let user of users; let i=index">
  <!-- 如果用户ID在白名单中，显示selected -->
  <div *ngIf="whiteListIDs.includes(user.id); else notSelectedBlock">selected!</div>
  <!-- 定义else区块的内容 -->
  <ng-template #notSelectedBlock>not selected..</ng-template>
</div>

对应的组件代码保持你的原数组即可：

whiteListIDs = ["id1", "id2", ...];

方法二：在组件中封装判断逻辑（推荐） #

如果你的判断逻辑以后可能会变复杂，或者用户列表数据量比较大，更推荐把判断逻辑封装到组件的方法里，这样模板更简洁，也方便后续维护和性能优化：

首先在component.ts中添加一个判断方法：

whiteListIDs = ["id1", "id2", ...];

// 封装判断逻辑
isUserInWhitelist(userId: string): boolean {
  return this.whiteListIDs.includes(userId);
}

然后在模板中调用这个方法：

<div *ngFor="let user of users; let i=index">
  <div *ngIf="isUserInWhitelist(user.id); else notSelectedBlock">selected!</div>
  <ng-template #notSelectedBlock>not selected..</ng-template>
</div>

为什么推荐第二种方法？ #

• 可维护性更高：如果以后需要给白名单判断加额外条件（比如还要判断用户状态），直接修改组件里的方法就行，不用动模板
• 性能更优：当列表数据量大时，结合Angular的ChangeDetectionStrategy.OnPush可以减少不必要的变更检测，提升页面性能

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