Angular Material - 隐藏禁用的选择选项

Question

我的应用中有一个表单，其中有一个带有用户列表的 mat-select。用户有权限，在我的选择中我只想显示那些有权限的人。我检查了mat-select 的文档，可以禁用用户，但仍显示为一个选项。

我尝试使用 [class-hidden] 并尝试使用 CSS 隐藏它，但用户的空间仍然存在，这在应用程序中看起来很糟糕。有没有办法从选择选项中隐藏禁用的用户？

这是我的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