Angular: seleccionado en la opción de seleccionar no funciona como exceptuado mientras se usa junto con ngModel

Tengo una matriz de objetos ( usuarios nombrados) que se mostrarán como opciones de dropdownlist . y tengo otra lista de objetos (llamada selectedUsers y se guarda en backend) que se usa para inicializar la dropdownlist .

formación:

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

Estoy frente a una situación cableada que es cuando enlace Object para select options por [ngValue] , y [ngValue] una función a [selected] que verificará si la opción actual existe en [ngValue] selectedUsers .

Puedo ver que la función se recupera y el resultado se devuelve verdadero / falso como excepción, pero las opciones no se seleccionan.

modelo:

  {{user.name}}  

función en el 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 utilicé Array.filter o Array.findIndex para verificar si los datos existen y el resultado es correcto.

Por favor, consulte esta demostración con la tercera dropdownlist y verifique dónde estoy haciendo algo mal? o me falta algo sobre [selected] ? Espero que alguien pueda explicar claramente sobre esto.

UPD:

con la ayuda de @Günter Zöchbauer, esta situación puede resolverse usando la directiva compareWith (refiérase a su respuesta) no importa single select o multi select , pero todavía estoy confundido por qué funcionan bien al costado pero fracasan juntos y aún tratando de descubrir el motivo .

selected no es compatible con [(ngModel)]="selectedUser3" .

Para seleccionar un elemento, el value (solo para cadena) o valor de propiedad ngValue debe coincidir con el valor en selectedUser3 .

 this.selectedUser3 = this.users[2]; 

De forma predeterminada, solo se verifica la identidad del objeto, por lo tanto, otra instancia de objeto con las mismas propiedades y valores no coincide. Puede personalizar la comparación 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; } 

Responda a los conflictos entre [(ngModel)] y [seleccionado]

después de algunas investigaciones y depuración, encuentro que al usar ngModel en select , angular ejecutará su propio SelectMultipleControlValueAccessor para select y poseer directive para la option de select qué lead selected se ignorará .

En el tercer ejemplo (ejemplo plunker ), después de ngModel , aunque se ngModel función bind [selected] , se ignorará su resultado.


Comentarios

  • comentario1:
    El problema puede resolverse vinculando [(ngModel)] y [ngValue] con la misma instancia de objetos.
  • comentario2:
    El problema también se puede resolver utilizando la directiva compareWith , ver el artículo de Gunter.
  • comentario3:
    Esto sucederá también para la selección única, consulte SelectControlValueAccessor y directive para la option .

Nueva información:

Ver también este tema para más información.