Angular: selecionado na opção de seleção não funciona como exceção ao usar junto com ngModel

Eu tenho uma matriz de objects ( usuários nomeados) que serão mostrados como opções de dropdownlist . e eu tenho outra lista de objects (chamada selectedUsers e é salva no backend) que é usada para inicializar a dropdownlist .

matriz:

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

Eu estou enfrentando uma situação com fio que é quando eu ligar Object para select options por [ngValue] , e ligar uma function para [selected] que irá verificar se a opção atual existe em selectedUsers .

Eu posso ver a function é recuperada e o resultado é retornado true / false como exceção, mas as opções continuam desmarcadas.

modelo:

  {{user.name}}  

function no componente:

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

mencione que usei Array.filter ou Array.findIndex para verificar se os dados existem e o resultado está correto.

Por favor, consulte esta demonstração com o terceiro dropdownlist e verifique onde estou fazendo algo errado? ou estou faltando alguma coisa sobre [selected] ? Espero que alguém possa explicar claramente sobre isso.

UPD:

com a ajuda do @Günter Zöchbauer, esta situação pode ser resolvida usando compareWith diretiva (consulte a sua resposta) não importa single select ou multi select , mas eu ainda estou confuso porque eles funcionam bem ao lado, mas falham juntos e ainda tentando descobrir o motivo .

selected não é suportado com [(ngModel)]="selectedUser3" .

Para tornar um item selecionado, o value (somente para string) ou valor da propriedade ngValue precisa corresponder ao valor em selectedUser3 .

 this.selectedUser3 = this.users[2]; 

Por padrão, apenas a identidade do object é verificada, portanto, outra instância do object com as mesmas propriedades e valores não corresponde. Você pode personalizar a comparação usando 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; } 

Resposta a conflitos entre [(ngModel)] e [selected]

depois de alguma pesquisa e debugging, acho que enquanto estiver usando ngModel em select , o angular executará seu próprio SelectMultipleControlValueAccessor para select e directive própria para a option de select qual lead selected para ser ignorado .

No terceiro exemplo (exemplo plunker ), depois de ngModel ser usado, embora a function bind para [selected] seja chamada, mas o resultado é simplesmente ignorado.


Comentários

  • comment1:
    O problema pode ser resolvido ligando [(ngModel)] e [ngValue] com a mesma instância de objects.
  • comment2:
    O problema também pode ser resolvido usando compareWith diretiva, consulte compareWith Gunter
  • comment3:
    Isso também acontecerá para seleção única, consulte SelectControlValueAccessor e directive para option .

Nova informação:

Veja também este problema para mais informações.