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

Question

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

我尝试使用此 https://stackblitz.com/edit/angular-dqvvf5?file=src%2Fapp%2Fapp.component.html 但逻辑不适用于 angular material。

Answer 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) 因为您将 2 个参数传递给它HTML.

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

Selected value in one dropdown should not appear in other two dropdowns in Angular material

javascript

frontend

angular-material

dropdown

angular