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将<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中。

我可以看到该函数已被检索，结果返回true / false为例外，但选项保持未选中状态。

模板：

Array.findIndex

组件中的

功能：

dropdownlist

提到我使用[selected]或compareWith检查数据是否存在，结果是否正确。

请将此demo与第三个single select一起使用，并查看我在哪里做错了什么？或者我错过了multi select的某些内容？我希望有人可以清楚地解释这一点。

UPD：

在@GünterZöchbauer的帮助下，无论$this->flash->success还是$this->session->set_flashdata，都可以使用ContentCachingRequestWrapper指令（参考他的回答）来解决这种情况，但我仍然感到困惑，为什么他们会工作与此并驾齐驱，但仍在努力找出原因。

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;
}

Answer 2

回答[（ngModel）]和[selected]之间的冲突

经过一些研究和调试后，我发现在ngModel上使用select时，angular会为select运行自己的 SelectMultipleControlValueAccessor ，对option select selected拥有 directive ，导致ngModel被忽略。

在第三个示例（示例plunker）中，在使用[selected]之后，虽然将调用函数绑定到[(ngModel)]，但它的结果将被忽略。

<强>评论

的注释1：
通过将[ngValue]和compareWith与相同的对象实例绑定，可以解决该问题。

的注释2：
使用option指令也可以解决问题，请参阅 Gunter' s anwser

的将comment3：
这也适用于单一选择，请参阅 SelectControlValueAccessor 和 directive {{1}}。

新信息：

有关详细信息，另请参阅此issue。

Angular：在选择选项时选择在与ngModel

2 个答案: