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

问题描述

我有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}}

解决方案

正如您在问题中所发布的，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(插件的第三个下拉列表):使用

对于上述所有解决方案，请参考以下 plunker .

I have 2 objects of the type User:

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

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

Console.log():

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 user Object):

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

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

解决方案

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.

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(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(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(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;
}

refer the below plunker for all the above solutions.

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