有条件地将 mat-option 添加到 mat-select

Question

删除mat-select中的一些参数

大家好！我从数据库中引入了一些参数 (7)，但我只需要使用 4，因此在显示 mat-select 列表时，它只显示 4，而不是 7。我试图用[隐藏] 选项，但我真的想删除它们并且我的浏览器看不到它们，我该怎么做？我是 Angular 的新手。我用 * ngIf 读过它，但我不知道怎么读。感谢您的帮助！

HTML：

<td>
  <mat-select
    placeholder="Tipo trámite"
    name="tipoTramite"
    [(ngModel)]="tipoTramiteValue"
    (change)="onChange(tipoTramiteValue)"
  >
    <mat-option
      *ngFor="let tipoTramite of listTiposNovedad"
      [value]="tipoTramite.nombreParametro"
      [hidden]="tipoTramite.nombreParametro == 'TERMINACIÓN ANTICIPADA' || tipoTramite.nombreParametro == 'PRÓRROGA'  || tipoTramite.nombreParametro == 'SUSPENSIÓN'"
      >{{tipoTramite.nombreParametro}}</mat-option
    >
  </mat-select>
</td>

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) => {
      this.listTiposNovedad = response;
    });
  }
}

Answer 1

你可以通过这种方式使用 *ngIf 来做到这一点

*ngIf="condition"（其中 condition 是您要渲染元素的条件）

<td>
          <mat-select placeholder="Tipo trámite" name="tipoTramite" [(ngModel)]="tipoTramiteValue"  (change)="onChange(tipoTramiteValue)">
<ng-container *ngFor="let tipoTramite of listTiposNovedad">
            <mat-option *ngIf="!(tipoTramite.nombreParametro == 'TERMINACIÓN ANTICIPADA' || tipoTramite.nombreParametro == 'PRÓRROGA'  || tipoTramite.nombreParametro == 'SUSPENSIÓN')" [value]="tipoTramite.nombreParametro" >{{tipoTramite.nombreParametro}}</mat-option>
          </mat-select>
<ng-container>
</td>