Question

我有两个User用户类型的对象：

users包含完整的用户列表。
selectedUsers的{{1}}返回db

所以我只想将getUsersBySid getUsersById给出的用户标记为已选中，我试过这个但是它不起作用：

selectedUsers

从DB检索用户的函数：

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

CONSOLE.LOG（）：

用户（3个用户对象）：

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

selectedUsers（1个用户对象）：

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

编辑2： 如果我打印两个对象，我可以看到selectedUsers正在改变，但下拉列表没有标记为选中(1) [Object] 0:Object id:"1" name:"administrador" pass:"21232f297a57a5a743894a0e4a801fc3" __proto__:Object length:1 __proto__:Array(0)

selectedUsers

Answer 1

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

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

选项1（plunker中的第一个下拉列表）：使用[ngValue]绑定user（对象），然后selectedUsers的项必须保留{的项目的确切实例{1}}这意味着您必须将users与selectedUsers进行比较，并从原始users列表中推送具有相同值的用户。

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

OPtion3（plunker中的第三个下拉列表）：使用 compareWith 这似乎是最简单的方法。

user.id

请参阅以下plunker以获取上述所有解决方案。

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

1 个答案: