Как предотвратить выбор значения через множественный выбор в ng-select - PullRequest
Новая
       4

Как предотвратить выбор значения через множественный выбор в ng-select

0 голосов
/ 18 января 2020

У меня есть два выпадающих списка, которые получают данные из одного массива. Если я выберу опцию в первом раскрывающемся списке, то значение не должно быть доступно во втором раскрывающемся списке, и наоборот.

Я используя 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];
}

DropDown 

         <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>

1 Ответ

1 голос
/ 19 января 2020

просто создайте две переменные, «source» и «dest», и после создания формы подпишитесь на form.valueChanges для фильтрации значений. Я использую оператор слияния rx js, вы можете иметь две подписки: одну для 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);
    })
  }
  }

В избранном

См. стекаблиц

...