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

Question

删除垫子内的一些参数-select

大家好！我从数据库中获取了一些参数 (7)，但我只需要使用 4，因此在显示 mat-select 的列表时，它只显示 4，而不是 7。我试过使用 [hidden] 选项隐藏它们，但我真的想删除它们，但我的浏览器看不到它们，我该怎么做？我是 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>

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

Add mat-option conditionally to mat-select

angular

angular-material

hidden

angular-ng-if

mat-select