Angular中mat-select如何实现mat-option的条件添加与移除

实现方案（两种均可实现DOM中无多余节点的需求） #

方案1：TS层提前过滤数据源（更推荐）

直接在接口拿到数据时就过滤掉不需要的选项，模板只循环需要的4条数据，从根源上避免生成多余节点，性能最优。
修改TS代码如下：

export class SolicitudFormat implements OnInit {
  tipoNovedad;
  listTiposNovedad;

  constructor(
    private dialog: MatDialog,
    public datePipe: DatePipe,
    public adminCTService: AdminCtserviceService,
    public parametroService: ParametroService
  ) {
    this.parametroService.listNovedadesContrato().subscribe((response) => {
      // 过滤掉不需要的3个选项
      const excludeOptions = ['TERMINACIÓN ANTICIPADA', 'PRÓRROGA', 'SUSPENSIÓN'];
      this.listTiposNovedad = response.filter(item => !excludeOptions.includes(item.nombreParametro));
    });
  }
}

HTML代码直接删掉原来的[hidden]属性即可，不需要额外修改：

<td>
  <mat-select
    placeholder="Tipo trámite"
    name="tipoTramite"
    [(ngModel)]="tipoTramiteValue"
    (change)="onChange(tipoTramiteValue)"
  >
    <mat-option
      *ngFor="let tipoTramite of listTiposNovedad"
      [value]="tipoTramite.nombreParametro"
      >{{tipoTramite.nombreParametro}}</mat-option
    >
  </mat-select>
</td>

方案2：模板层用ng-container配合*ngIf判断

如果不想修改原始数据源，可以通过Angular的ng-container容器（本身不生成真实DOM节点）来同时使用ngFor和ngIf，过滤不需要的选项。
直接修改HTML代码如下即可：

<td>
  <mat-select
    placeholder="Tipo trámite"
    name="tipoTramite"
    [(ngModel)]="tipoTramiteValue"
    (change)="onChange(tipoTramiteValue)"
  >
    <!-- ng-container是无实际DOM的容器，用来放循环指令 -->
    <ng-container *ngFor="let tipoTramite of listTiposNovedad">
      <mat-option
        *ngIf="!['TERMINACIÓN ANTICIPADA', 'PRÓRROGA', 'SUSPENSIÓN'].includes(tipoTramite.nombreParametro)"
        [value]="tipoTramite.nombreParametro"
        >{{tipoTramite.nombreParametro}}</mat-option
      >
    </ng-container>
  </mat-select>
</td>

两种方案都可以完全移除不需要的选项节点，不会在DOM中生成隐藏元素，优先推荐使用方案1，维护和性能都更好。

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