如何防止在 ng-select 中跨多個選擇選擇的值

Question

我有兩個下拉列表，它們從同一個數組中獲取數據。如果我在第一個下拉列表中選擇了一個選項，那么該值在第二個下拉列表中不應該可用，反之亦然。

我正在使用 ng-select，但我可以看到與我的問題相關的任何內容。 我找到了他們在帶有過濾器選項的 angular js 中使用它的鏈接，但是如何在 ng-select 中完成相同的操作

我試圖禁用 ng-select 中的選項，如下所示，但如果用戶選擇另一個選項，我如何啟用以前禁用的值。

change(data) {
  const items = this.hardwareIds.slice();
  this.hardwareIds.forEach((hardwareId) => {
    if (hardwareId.id === data.id) {
      hardwareId.disabled =  true;
    }
  });
  this.hardwareIds = [];
  this.hardwareIds = [...items];
}

落下

         <ng-select
            #sourceSelect
            [items]="hardwareIds"
            [selectOnTab]="true"
            [clearable]="false"
            bindValue="id"
            bindLabel="hardware_id"
            labelForId="source_switch_id"
            placeholder="Select source switch id"
            formControlName="source_switch_id"
            (change)="change($event)"
          >
          </ng-select>

          <ng-select
            #destinationSelect
            [items]="hardwareIds"
            [selectOnTab]="true"
            [clearable]="false"
            bindValue="id"
            bindLabel="hardware_id"
            labelForId="dest_switch_id"
            placeholder="Select destination switch id"
            formControlName="dest_switch_id"
            (change)="change($event)"
          >
          </ng-select>

Answer 1

只需創建兩個變量“source”和“dest”，並在創建表單后訂閱form.valueChanges來過濾值。 我使用合並 rxjs 運算符，您可以有兩個訂閱，一個用於 this.form.get('dest_switch_id').valueChanges，另一個用於 this.form.get('source_switch_id').valueChanges

  hardwareIds = [
    { id: 1, hardware_id: "uno" },
    { id: 2, hardware_id: "dos" },
    { id: 3, hardware_id: "tres" },
    { id: 4, hardware_id: "cuatro" },
    { id: 5, hardware_id: "cinco" }
  ];

  form=new FormGroup({
    source_switch_id:new FormControl(),
    dest_switch_id:new FormControl(),

  })
  //you create two variables "source" and "dest"
  source = this.hardwareIds;
  dest = this.hardwareIds;

  ngOnInit() {
    merge(
      this.form.get('dest_switch_id').valueChanges,
      this.form.get('source_switch_id').valueChanges
    ).subscribe(()=>{

      this.source = this.hardwareIds.filter(x => x.id != this.form.get('dest_switch_id').value);
      this.dest = this.hardwareIds.filter(x => x.id != this.form.get('source_switch_id').value);
    })
  }
  }

在一個選擇

查看堆棧閃電戰