在选择选项下拉列表中选择了 Angular 2 集 [英] Angular 2 set selected on a select option dropdown

问题描述

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

I have 2 objects of the type User:

• users 拥有完整的用户列表.
• selectedUsers 有 getUsersBySid 返回一个来自 db 的用户列表

• users has the full list of users.
• selectedUsers has the getUsersBySid that returns a list of users from db

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

So I just want to mark as selected the users given by the getUsersById: selectedUsers and i tried this but its not working:

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

从数据库中检索用户的函数:

Function that retrieves the users from DB:

 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 个用户对象):

users(3 user objects):

(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 个用户对象):

selectedUsers(1 user Object):

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

编辑 2:如果我打印这两个对象，我可以看到 selectedUsers 正在更改，但下拉列表未将 selectedUsers

edit 2: If i print both objects i can see that selectedUsers is changing but the dropdown is not marking as selected the 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 有一个来自 db 的用户列表，您不能以这种方式将其用作对象 <代码>selectedUsers.id.

As you posted in your question, selectedUsers has a list of users from db, you cannot use it this way as an object selectedUsers.id.

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

you can try with the below options, but first of all, you have to remove [selected]="selectedUsers.id === user.id" from your option element, since it has some conflicts with [(ngModel)].

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

Option1(the first dropdown in plunker): bind user(object) with [ngValue], then items of selectedUsers must keep the exact instance of items from users which means you have to compare selectedUsers with users and push those users with same value from the original users list.

Option2(plunker的第二个下拉菜单):将user.id与[ngValue]或[value]绑定，那么你应该将selectedUser设置为<代码>user.id.

Option2(the second dropdown in plunker): bind user.id with [ngValue] or [value], then you should set selectedUser to be an array of user.id.

OPtion3(plunker 中的第三个下拉菜单):使用 compareWith 这似乎是最简单的方法.

OPtion3(the third dropdown in plunker): use compareWith which seems the easiest way.

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

refer the below plunker for all the above solutions.

这篇关于在选择选项下拉列表中选择了 Angular 2 集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！