角度:与ngModel一起使用时，在select选项中选择的select不能正常工作 [英] Angular: selected on option of select doesn't work as excepted while using along with ngModel

问题描述

我有一个对象数组(名为 users )，将显示为dropdownlist的选项.我还有另一个对象列表(名为 selectedUsers ，保存在后端)，用于初始化dropdownlist.

I have an array of objects(named users) which will be shown as options of dropdownlist. and I have another objects list(named selectedUsers and is saved in backend) which is used to initialize the dropdownlist.

数组:

users = [
  {
    id: 2,
    name: 'name2'
  },{
    id: 2,
    name: 'name2'
  },{
    id: 3,
    name: 'name3'
  }
];

selectedUsers3 = [
  {
    id: 1,
    name: 'name1'
  },{
    id: 2,
    name: 'name2'
  }
];

我正面临一个有线情况，即我将Object通过[ngValue]绑定到select options，然后将一个函数绑定到[selected]，这将检查selectedUsers中是否存在当前选项.

I'm facing a wired situation which is when I bind Object to select options by [ngValue], and bind a function to [selected] which will check whether the current option exists in selectedUsers.

我可以看到已检索到该函数，并且返回的结果是true/false(例外)，但是未选择该选项.

I can see the function is retrieved and the result is returned true/false as excepted, but the options keeps unselected.

模板:

<select multiple [(ngModel)]="selectedUsers3">
  <option *ngFor="let user of users" [selected]="checkExist(user)" [ngValue]="user">{{user.name}}</option>
</select>

组件中的功能

checkExist(user) {
  return this.selectedUsers3.findIndex(selUser => selUser.id === user.id) > -1;
  //return this.selectedUsers3.filter(selUser => selUser.id === user.id).length > 0;
}

提到使用Array.filter或Array.findIndex检查数据是否存在，并且结果正确.

mention that I used Array.filter or Array.findIndex to check whether the data exists, and the result is correct.

请将此演示与第三个dropdownlist一起参考，并检查在哪里我做错了吗?还是我缺少有关[selected]的内容?我希望有人可以对此进行清楚的解释.

Please refer this demo with the third dropdownlist, and check where am I doing something wrong? or am I missing something about [selected]? I hope someone can explain clearly about this.

UPD:

在@GünterZöchbauer的帮助下，无论使用single select还是multi select，都可以使用compareWith指令(请参考他的回答)解决这种情况，但是我仍然困惑为什么它们可以很好地协同工作，但是一起失败，仍在尝试找出原因.

with @Günter Zöchbauer's help, this situation can be solved by using compareWith directive(refer his answer) no matter single select or multi select, but I'm still confused why they work well alongside but fail together and still trying to figure out the reason.

推荐答案

selected.

要选择一个项目，value(仅适用于字符串)或ngValue属性值需要与selectedUser3中的值匹配.

To make an item selected, the value (for string only) or ngValue property value needs to match the value in selectedUser3.

this.selectedUser3 = this.users[2];

默认情况下，仅检查对象标识，因此另一个具有相同属性和值的对象实例不匹配. 您可以使用compareWith

By default only object identity is checked, therefore another object instance with the same properties and values doesn't match. You can customize comparison using compareWith

https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>
compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

这篇关于角度:与ngModel一起使用时，在select选项中选择的select不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！