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

Question

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

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

Answer 1

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 вход

HTML

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

Т.С.

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

Пример Stackblitz

иначе использовать bindValue