'[selected]' selection does not work, as excluded in angular2

Question

I have an array of objects (named users ) that will display as dropdownlist options. and I have a list of other objects (named selectedUsers and saved in the backend) that is used to initialize the dropdownlist .

array:

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

I came across a wired situation where I bind Object to select options to [ngValue] and bind a function to [selected] , which checks if the current option exists in selectedUsers .

I see that the function is being extracted, and the result is returned true / false as excluded, but the parameters remain unselected.

template:

 <select multiple [(ngModel)]="selectedUsers3"> <option *ngFor="let user of users" [selected]="checkExist(user)" [ngValue]="user">{{user.name}}</option> </select> 

in component:

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

mention that I used Array.filter or Array.findIndex to check if data exists and the correct result.

Please refer to the demo with the third dropdownlist and check where I am doing something wrong? or am I missing something about [selected] ? Hope someone can explain this.

UPD:

with @ Günter Zöchbauer help, this situation can be resolved using the compareWith directive (see his answer) regardless of single select or multi select , but I'm still confused about why they work well together, but fail together and still trying to figure out reason.

Answer 1

selected not supported [(ngModel)]="selectedUser3" .

To make the selected item, the value of the value property (row only) or ngValue must match the value in selectedUser3 .

 this.selectedUser3 = this.users[2]; 

By default, only the identification of the object is checked, so another instance of the object with the same properties and values ​​does not match. You can customize the comparison using compareWith

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

 <select [compareWith]="compareFn" [(ngModel)]="selectedCountries"> <option *ngFor="let country of countries" [ngValue]="country"> {{country.name}} </option> </select> compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

Answer 2

Respond to conflicts between [(ngModel)] and [selected]

after some research and debugging, I found out the reason why the priority of angular is selected ( first ) and ngModel ( later ) for the select element.

In the third example ( plunker example), after angular runted [selected] parameters are set to selected as expected,

But after executing [(ngModel)] , it is mentioned here that I am binding an array of objects ( another instance with a binding for selecting options), angular is checked again, for which it is necessary to set to selected by comparing selectedUsers3 with users ( by the instance of the object ) and do not find one of them is not meeting each other, so the selected (installed selected ) parameters are deleted, and this is what we see at the end (all parameters are in an unselected state).

: the problem can be solved by binding [(ngModel)] and [ngValue] to the same instance of objects, but in this way we do not need [selected] at all.

---

New information:

See also issue for more information.