Angular Material - 隐藏禁用的 select 选项

Question

我的应用程序中有一个表单，其中有一个包含用户列表的 mat-select。用户拥有权限，在我的 select 中，我只想显示拥有权限的用户。我检查了 mat-select 的文档，可以禁用用户，但仍显示为一个选项。

我尝试使用 [class-hidden] 并尝试使用 CSS 隐藏它，但是用户的 space 仍然存在并且在应用程序中看起来很糟糕。有没有办法从 select-option 中隐藏禁用的用户？

这是我的 html 代码：

<div class="material-input">
  <mat-form-field class="form-group-select">
    <mat-label>User name</mat-label>
    <mat-select class="select" placholder="User names"
      formControlName="user">
      <mat-option  *ngFor="let user of users"
        [value]="user.id" [disabled]="user.permission === 'N'">
        {{user.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Answer 1

如果您想隐藏 <mat-option> 中的禁用用户，建议直接过滤 users 中的元素。因此，users 数组将只包含 permission !== 'N' 的用户，这些筛选的用户将仅显示在 <mat-option>.

中

.component.ts

// Filter users after getting data
this.users = this.users.filter((user) => user.permission !== 'N');

.component.html

<mat-select class="select" placholder="User names" formControlName="user">
  <mat-option *ngFor="let user of users" [value]="user.id">
    {{ user.name }}
  </mat-option>
</mat-select>

Sample demo on StackBlitz

Angular Material - 隐藏禁用的 select 选项

Angular Material - Hide disabled select option

angular-material

angular

mat-select