Угловое: выбранное по опции выбора не работает, как исключено, используя вместе с ngModel

У меня есть массив объектов (имен пользователей ), которые будут отображаться в качестве опций dropdownlist . и у меня есть список других объектов (с именем selectedUsers и сохраняется в backend), который используется для инициализации dropdownlist .

массив:

 users = [ { id: 2, name: 'name2' },{ id: 2, name: 'name2' },{ id: 3, name: 'name3' } ]; selectedUsers3 = [ { id: 1, name: 'name1' },{ id: 2, name: 'name2' } ]; 

Я столкнулся с проводной ситуацией, когда я привязываю Object для select options [ngValue] и привязываю функцию к [selected] которая будет проверять, существует ли текущая опция в selectedUsers .

Я вижу, что функция извлекается, и результат возвращается true / false как исключенный, но параметры остаются неизбираемыми.

шаблон:

  {{user.name}}  

функция в компоненте:

 checkExist(user) { return this.selectedUsers3.findIndex(selUser => selUser.id === user.id) > -1; //return this.selectedUsers3.filter(selUser => selUser.id === user.id).length > 0; } 

что я использовал Array.filter или Array.findIndex чтобы проверить, существуют ли данные, и результат верен.

Пожалуйста, обратитесь к этой демонстрации с третьим dropdownlist и проверьте, где я делаю что-то неправильно? или я что-то пропустил в [selected] ? Надеюсь, кто-то может объяснить об этом.

UPD:

с помощью @ Günter Zöchbauer, эту ситуацию можно решить, используя директиву compareWith (см. его ответ), независимо от single select или multi select compareWith , но я все еще путаюсь, почему они хорошо работают вместе, но терпят неудачу вместе и все еще пытаются выяснить причину ,

selected не поддерживается с помощью [(ngModel)]="selectedUser3" .

Чтобы сделать элемент выбранным, value (только для строки) или ngValue свойства ngValue должно соответствовать значению в selectedUser3 .

 this.selectedUser3 = this.users[2]; 

По умолчанию проверяется только идентификация объекта, поэтому другой экземпляр объекта с теми же свойствами и значениями не совпадает. Вы можете настроить сравнение, используя compareWith

https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html

  compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

Отвечайте на конфликты между [(ngModel)] и [selected]

после некоторых исследований и отладки, я обнаружил, что при использовании ngModel на select , угловой будет запускать собственный SelectMultipleControlValueAccessor для select и собственной directive для option select которая будет selected для игнорирования .

В третьем примере (пример plunker ), после использования ngModel будет ngModel функция bind to [selected] , но результат просто игнорируется.


Комментарии

  • comment1:
    Проблема может быть решена путем связывания [(ngModel)] и [ngValue] с тем же экземпляром объектов.
  • comment2:
    Проблема также может быть решена с помощью директивы compareWith , см. Статью Gunter’s anwser
  • comment3:
    Это произойдет и для одного выбора, см. SelectControlValueAccessor и directive для option .

Новая информация:

См. Также эту проблему для получения дополнительной информации.

  • Когда использовать интерфейс и модель в TypeScript / Angular2
  • Каким образом можно использовать угловые2 HTTP-запросы с защитой Django CSRF?
  • Как обрабатывать событие прокрутки windows в Angular 4?
  • точный фильтр в угловом
  • Я получаю «Ответ на ошибку Http для (неизвестный url): 0 Unknown Error» вместо фактического сообщения об ошибке в Angular
  • $ применить уже выполненную ошибку
  • Угловая привязка HTML
  • DI с циклической зависимостью от пользовательских HTTP и ConfigService
  • Как получить JSON-файл в Angular 2
  • Угловой 2 выход с выхода маршрутизатора
  • AngularJS Upgrade (от 1.5 до 1.6.1.7) Делает привязку видимости области действия неопределенной
  • Давайте будем гением компьютера.