Angular中Mat-select如何隐藏已选值？多下拉框去重问题

问题根源 #

第三个下拉框仍显示已选值，核心问题有两个：

• 条件判断逻辑失效：你在第三个下拉框的*ngIf里重复写了arr !== selectedValue2，更关键的是前两个下拉框绑定的value是字符串（services数组的元素），但第三个下拉框遍历的是arrTmp对象数组，直接用对象arr和字符串selectedValue1/2比较，对象与字符串永远不相等，导致过滤条件完全不起作用。
• 数据源不一致：前两个下拉框用的是services数组，第三个用的是未定义的arrTmp，数据结构不统一。

修正代码 #

1. 统一数据源（TS文件）

确保所有下拉框使用同一组数据源，这里以字符串数组为例：

selectedValue1: string;
selectedValue2: string;
selectedValue3: string;
public services = ['Service 1', 'Service 2', 'Service 3'];

2. 修复下拉框逻辑（HTML文件）

调整第三个下拉框的判断条件，保证与前两个下拉框的value类型匹配：

<mat-form-field>
  <mat-label>drop down 1</mat-label>
  <mat-select [(ngModel)]="selectedValue1">
    <mat-option *ngFor="let item of services" [value]="item">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>drop down 2</mat-label>
  <mat-select [(ngModel)]="selectedValue2">
    <mat-option *ngFor="let item of services" [value]="item" *ngIf="item !== selectedValue1">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="flex-auto">
  <mat-select [(ngModel)]="selectedValue3">
    <mat-option *ngFor="let item of services" [value]="item" *ngIf="item !== selectedValue1 && item !== selectedValue2">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>

如果确实需要使用对象数组（含name字段），则统一所有下拉框的绑定逻辑：

// TS文件
selectedValue1: string;
selectedValue2: string;
selectedValue3: string;
public services = [
  { name: 'Service 1' },
  { name: 'Service 2' },
  { name: 'Service 3' }
];

<!-- HTML文件 -->
<mat-form-field>
  <mat-label>drop down 1</mat-label>
  <mat-select [(ngModel)]="selectedValue1">
    <mat-option *ngFor="let item of services" [value]="item.name">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>drop down 2</mat-label>
  <mat-select [(ngModel)]="selectedValue2">
    <mat-option *ngFor="let item of services" [value]="item.name" *ngIf="item.name !== selectedValue1">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="flex-auto">
  <mat-select [(ngModel)]="selectedValue3">
    <mat-option *ngFor="let item of services" [value]="item.name" *ngIf="item.name !== selectedValue1 && item.name !== selectedValue2">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

额外优化建议 #

可以在TS中定义计算属性，把过滤逻辑从模板中抽离，让代码更简洁：

get availableOptionsForDropdown2() {
  return this.services.filter(item => item !== this.selectedValue1);
}

get availableOptionsForDropdown3() {
  return this.services.filter(item => item !== this.selectedValue1 && item !== this.selectedValue2);
}

然后HTML中直接使用计算属性：

<mat-form-field>
  <mat-label>drop down 2</mat-label>
  <mat-select [(ngModel)]="selectedValue2">
    <mat-option *ngFor="let item of availableOptionsForDropdown2" [value]="item">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="flex-auto">
  <mat-select [(ngModel)]="selectedValue3">
    <mat-option *ngFor="let item of availableOptionsForDropdown3" [value]="item">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>

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