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

Question

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

• users 拥有完整的用户列表。
• selectedUsers 有 getUsersBySid 从 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 中的第二个下拉菜单）：将user.id 与[ngValue] 或[value] 绑定，则应将 selectedUser 设置为user.id 的数组。

OPtion3（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 了解上述所有解决方案。