Angular 2 在 select 选项下拉菜单上设置 selected

Question

我有 2 个用户类型的对象：

users 有完整的用户列表。
selectedUsers 有 getUsersBySid 那 returns 来自 db

所以我只想将 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");
                }
            );
    }

Console.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)

编辑 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}}

Answer 1

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

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

Option1(plunker 中的第一个下拉列表): 将 user(object) 与 [ngValue] 绑定，然后 selectedUsers 的项目必须保持准确来自 users 的项目实例，这意味着您必须将 selectedUsers 与 users 进行比较，并从原始 users 列表中推送那些具有相同值的用户。

Option2(plunker 中的第二个下拉菜单): bind user.id with [ngValue] or [value], then you should set selectedUser to be an array of user.id.

选项 3（plunker 中的第三个下拉菜单）：使用 compareWith 这似乎是最简单的方法。

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

Angular 2 在 select 选项下拉菜单上设置 selected

Angular 2 set selected on a select option dropdown

angular2-forms

angular2-template

angular