Angular使用*ngFor渲染mat-tab时如何过滤指定名称的标签页

有两种常用的实现方式，都可以满足过滤掉名称为1_exists的项不渲染的需求： #

方案1：组件内提前过滤数据源（更推荐） #

这种方式性能最优，过滤逻辑在业务逻辑层完成，模板不需要额外的运算判断：

1. 在拿到接口返回的标签数据后，先做过滤再赋值给tabNames变量
   示例组件代码：

// app.component.ts
// 以下为接口请求获取标签数据的示例逻辑
fetchTabList().subscribe((res) => {
  // 过滤规则：排除名称等于1_exists的项
  // 如果tab是对象类型，将判断条件改为 tab.你的名称字段 !== '1_exists' 即可
  this.tabNames = res.filter(tab => tab !== '1_exists')
})

2. 模板代码不需要修改，保持原有写法即可。

方案2：模板内结合ngIf过滤 #

如果需要保留原始的tabNames数组数据不做修改，可以在模板层做判断，使用ng-container避免产生多余DOM节点：
示例模板代码：

<mat-tab-group animationDuration="0ms">
  <ng-container *ngFor="let tab of tabNames">
    <mat-tab [label]="tab" *ngIf="tab !== '1_exists'">
      content..........
    </mat-tab>
  </ng-container>
</mat-tab-group>

注：如果你的tab是对象结构，只需要把ngIf的判断条件替换为对应的字段判断即可，比如tab.name !== '1_exists'。

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