угловая 6 нг-выберите, как установить элемент, выбранный в раскрывающемся списке с помощью выражения шаблона - PullRequest
Новая
       8

угловая 6 нг-выберите, как установить элемент, выбранный в раскрывающемся списке с помощью выражения шаблона

0 голосов
/ 06 января 2019

В проекте Angular 6 я пытаюсь использовать ng-select пакет узла. Я сталкиваюсь с трудностью установки элемента, выбранного в раскрывающемся списке при использовании выражения шаблона. Без выражения шаблона я могу установить элемент, выбранный в раскрывающемся списке.

Я создал демонстрационный проект в stackblitz. Пожалуйста, проверьте код здесь https://stackblitz.com/edit/ngselect-demo

1 Ответ

0 голосов
/ 06 января 2019

ng-select - очень гибкий компонент для сравнения элементов в массиве.

Вот функция findItem , которая отвечает за это сравнение: 

findItem(value: any): NgOption {
    let findBy: (item: NgOption) => boolean;
    if (this._ngSelect.compareWith) {
        findBy = item => this._ngSelect.compareWith(item.value, value)
    } else if (this._ngSelect.bindValue) {
        findBy = item => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue) === value
    } else {
        findBy = item => item.value === value ||
            !item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel)
    }
    return this._items.find(item => findBy(item));
}

Как видите, оно следует следующим правилам:

1) Используйте функцию compareWith, если имеется, иначе

2) Используйте bindValue, если имеется, иначе

3) Используйте bindLabel, если имеется

В вашем первом элементе управления, который не использует шаблонное выражение, вы передали bindLabel, поэтому он работает правильно. Если вы добавите тот же вход ко второму элементу управления, он будет работать

Разветвленный стек-блиц

Если вы хотите сохранить выбранное значение как массив объектов, я бы порекомендовал вам использовать compareWith input

HTML 

<ng-select 
  ...
  [compareWith]="compareWith"

ц 

compareWith(item, selected) {
  return item.id === selected.id
}

Пример Stackblitz

в противном случае используйте bindValue

...