为所有其他下拉菜单禁用一个下拉菜单的选定选项

Question

我有多个包含相同数组值的下拉菜单，我想禁用在一个下拉菜单中为其他下拉菜单选择的选项，我该如何实现？

 <div>
    <div>
      <label >Name</label>
    </div>
    <div >
      <select >
        <option value="">Select</option>
        <option *ngFor="let type of Demo">{{type}}</option>
      </select>
    </div>
  </div>

 <div>
    <div>
      <label >Number</label>
    </div>
    <div >
      <select >
        <option value="">Select</option>
        <option *ngFor="let type of Demo">{{type}}</option>
      </select>
    </div>
  </div>

.ts File
Demo = ['One', 'Two','Three']

Answer 1

试试这个

<div>
  <div>
    <label >Name</label>
  </div>
  <div >
    <select [(ngModel)]="selectedValues[0]">
      <option value="">Select</option>
      <option *ngFor="let type of Demo" [ngValue]="type" [disabled]="isDisabled(type)">{{type}}</option>
    </select>
  </div>
</div>

<div>
  <div>
    <label >Number</label>
  </div>
  <div >
    <select [(ngModel)]="selectedValues[1]">
      <option value="">Select</option>
      <option *ngFor="let type of Demo" [ngValue]="type" [disabled]="isDisabled(type)">{{type}}</option>
    </select>
  </div>
</div>

Demo = ['One', 'Two', 'Three']
  selectedValues = [];
  isDisabled(value) {
    return this.selectedValues.includes(value);
  }

如果您有 20 个下拉列表，请将 html 代码放入 *ngFor 并将标签、值绑定到其。

为所有其他下拉菜单禁用一个下拉菜单的选定选项

Disable selected option of one dropdown for all other dropdown

typescript

angular7