Angular中如何在*ngFor列表中排除当前用户（无需自定义管道）

嘿，这个场景我太熟了！不想写复杂管道又要绕开*ngFor和*ngIf的冲突，其实有几个超省心的办法，完全不用小题大做：

方法1：直接在*ngFor里用数组过滤 #

最直接的方式就是在*ngFor的表达式里调用数组的filter方法，当场把当前用户排除掉。代码示例：

<select>
  <option 
    *ngFor="let user of users.filter(user => user.id !== currentUser.id)" 
    [value]="user.id"
  >
    {{ user.name }}
  </option>
</select>

⚠️ 注意：如果你的用户列表特别大或者频繁更新，每次变更检测都会重新执行filter，可能有点性能损耗，但小规模列表或者静态场景下，这个方法绝对是最快上手的。

方法2：用<ng-container>分离指令 #

Angular的<ng-container>是个虚拟容器，不会生成额外的DOM元素，刚好可以用来分开*ngFor和*ngIf：

<select>
  <ng-container *ngFor="let user of users">
    <option 
      *ngIf="user.id !== currentUser.id" 
      [value]="user.id"
    >
      {{ user.name }}
    </option>
  </ng-container>
</select>

这种方式逻辑更直观，如果后面需要加更多过滤条件，直接在*ngIf里扩展就行，也不会让*ngFor的表达式变得臃肿。

方法3：在组件类里提前过滤 #

把过滤逻辑移到组件类里，用getter返回处理后的列表，模板会更干净：

// 组件类里定义getter
get filteredUsers() {
  return this.users.filter(user => user.id !== this.currentUser.id);
}

然后模板直接用过滤后的列表：

<select>
  <option 
    *ngFor="let user of filteredUsers" 
    [value]="user.id"
  >
    {{ user.name }}
  </option>
</select>

这个方法的优势是逻辑和模板分离，维护起来更方便，要是过滤逻辑变复杂了，直接改组件里的getter就行。如果担心性能，还可以给getter加个缓存（比如用装饰器或者局部变量存储结果）。

这三个方法都比写完整管道简单太多，根据你的场景选就行～

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