在选择选项下拉列表中选择 Angular 2 集

我有 2 个 User 类型的对象：

• users有完整的用户列表。
• selectedUsers有getUsersBySid从数据库返回用户列表

所以我只想将由getUsersById: selectedUsers我尝试了这个，但它不起作用：

<select multiple materialize="material_select" [materializeSelectOptions]="selectedUsers" [(ngModel)]="selectedUsers" name="users"> 
    <option value="" disabled selected>Usuarios</option>
    <option *ngFor="let user of users" [ngValue]="users" [selected]="selectedUsers.id === user.id">{{ user.name }} ({{ user.email }}) </option>
</select>

从数据库检索用户的函数：

 getUsersBySid(){
        this.surveyService.getUsersBySid(this.selectedSurvey)
            .subscribe(
                users => {
                    this.selectedUsers = users;
                    console.log(this.users);
                    console.log(this.selectedUsers);
                }, 
                error => {
                    this.alertService.error("error cargar usuarios");
                }
            );
    }

控制台.log():

用户（3个用户对象）：

(3) [Object, Object, Object]
0:Object
id:"1"
name:"administrador"
pass:"21232f297a57a5a743894a0e4a801fc3"
__proto__:Object
1:Object
2:Object
length:3
__proto__:Array(0)

selectedUsers（1 个用户对象）：

(1) [Object]
0:Object
id:"1"
name:"administrador"
pass:"21232f297a57a5a743894a0e4a801fc3"
__proto__:Object
length:1
__proto__:Array(0)

edit 2:如果我打印这两个对象，我可以看到 selectedUsers 正在更改，但下拉列表未标记为选定selectedUsers

<select multiple materialize="material_select" [materializeSelectOptions]="selectedUsers" [(ngModel)]="selectedUsers" name="selectedUsers"> 
    <option value="" disabled selected>Usuarios</option>
    <option *ngFor="let user of users" [ngValue]="user">{{ user.name }} ({{ user.email }}) </option>
</select>
Selected: {{selectedUsers}}<br/>
Users: {{users}}

正如您在问题中发布的那样，selectedUsers有来自数据库的用户列表，您不能以这种方式将其用作对象selectedUsers.id.

您可以尝试使用以下选项，但首先，您必须删除[selected]="selectedUsers.id === user.id"从你的option元素，因为它与[(ngModel)].

选项1（plunker中的第一个下拉菜单）: bind user（对象）与 [ngValue]，然后的项目selectedUsers必须保留项目的确切实例users这意味着你必须比较selectedUsers with users并推送那些与原来具有相同价值的用户users list.

选项2（plunker中的第二个下拉菜单）: bind user.id使用 [ngValue] 或 [value]，那么您应该将 selectedUser 设置为数组user.id.

OPtion3（plunker中的第三个下拉菜单）: use 与之比较 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>

// define this function in your component
compareFn(c1: Country, c2: Country): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

参考下面的plunker https://plnkr.co/edit/sTMUVnBaLsSo0vRsCbBF?p=preview对于上述所有解决方案。