一个下拉列表中的选定值不应出现在 Angular 材料的其他两个下拉列表中答案

【问题标题】：Selected value in one dropdown should not appear in other two dropdowns in Angular material一个下拉列表中的选定值不应出现在 Angular 材料的其他两个下拉列表中
【发布时间】：2020-11-24 16:48:11
【问题描述】：

一个下拉列表中的选定值不应出现在 Angular 材料的其他两个下拉列表中。如何从所有其他下拉列表中删除一个下拉列表中的选定值？（我有动态下拉菜单，每次点击按钮时都会添加）

我尝试使用这个https://stackblitz.com/edit/angular-dqvvf5?file=src%2Fapp%2Fapp.component.html，但逻辑不适用于有角度的材料。

【问题讨论】：

标签： javascript angular angular-material frontend dropdown

【解决方案1】：

我已使用您的 Stackblitz 并设法使用 mat-select 而不是标准 HTML select 使其工作。请参阅this Stackblitz 以获得工作演示。

主要变化在 HTML...

HTML

<div *ngFor="let field of fieldArray; index as idx" style="margin-bottom: 8px">
  <mat-form-field appearance="fill">
    <mat-label>Select Language</mat-label>
      <mat-select #selectLang (selectionChange)="selected(selectLang.value,i)">
      <ng-container *ngFor="let lang of languageList" >
        <mat-option *ngIf="selectLang.value === lang.name || !isSelected(lang.name)" [value]="lang.name">
          {{lang.name}}
        </mat-option>
      </ng-container>
    </mat-select>
  </mat-form-field>
  <button (click)="deleteFieldValue(idx, selectLang.value)" style="margin-left: 8px">X</button>
</div>

<button (click)="addFieldValue()">Add Select</button>

Typescript 与您的示例几乎相同，除了我已将 selected() 函数的签名修改为读取 selected(value: string, idx: number)，因为您从 HTML 中将 2 个参数传递给该函数。

【讨论】：