在选择选项下拉菜单中选择了角度2集

Question

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

• users具有完整的用户列表。
• selectedUsers具有getUsersBySid ，它从db返回用户列表

所以我只想将getUsersById给定的用户标记为selected： 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标记为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（插件的第一个下拉列表） ：将user （对象）与[ngValue]绑定，然后selectedUsers项必须保留来自users的项的确切实例，这意味着您必须将selectedUsers与users进行比较，并从中推送具有相同值的那些用户原始users列表。

Option2（插件的第二个下拉列表） ：将user.id与[ngValue]或[value]绑定，然后应将selectedUser设置为user.id的数组。

OPtion3（punker中的第三个下拉列表） ：使用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;
}

有关上述所有解决方案，请参考以下插件 。