Angular:在选择选项时选择在与ngModel一起使用时不起作用

Question

我有一个对象数组(命名用户),它们将显示为选项dropdownlist.我有另一个对象列表(名为selectedUsers并保存在后端),用于初始化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作为例外,但选项保持未选中状态.

模板:

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

组件中的功能:

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:

与@君特Zöchbauer的帮助,这种情况可以通过使用来解决compareWith指令(指他的回答)无论single select或者multi select,但我仍然困惑,为什么他们的工作很好,但旁边一起失败,仍然试图找出原因.

Answer 1

selected不支持[(ngModel)]="selectedUser3".

要选择项目,value(仅限字符串)或ngValue属性值需要与中的值匹配selectedUser3.

this.selectedUser3 = this.users[2];

默认情况下,仅检查对象标识,因此具有相同属性和值的另一个对象实例不匹配.您可以使用自定义比较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;
}