Question

在select标记中，我需要双向绑定，但无法正常工作。

<select [(ngModel)]="selectedCountry">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

selectedCountry是一个Country实例：selectedCountry.id = 3
countries是一个Country实例列表：country1.id = 1, country3.id = 3, country3.id = 3

selectedCountry和country3具有相等的值，但它们不是同一实例。然后未选择country3选项。

我已经覆盖了hashCode类的等于（==）运算符和Country，但仍然无法正常工作。

出什么问题了？有什么类似于角度compareWith指令吗？

<select [compareWith]="equals"  [(ngModel)]="selectedCountry">
   <option *ngFor="let country of countries" [ngValue]="country">
      {{country.name}}
   </option>
</select>

equals(o1: Country, o2: Country) {
   return o1.id === o2.id;
}

Answer 1

有没有类似于角度compareWith指令的东西？

您可以使用trackBy https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby

Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;

<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
  <option *ngFor="let country of countries" [ngValue]="country">
    {{country.name}}
  </option>
</select>

Answer 2

我发现了问题：

使用same（）函数比较选择ngModel的select_control_value_accessor中的值==。

我打开了一个github问题： https://github.com/dart-lang/angular/issues/1659

同时，我没有使用双向绑定复杂对象：

<select [(ngModel)]="selectedCountryId">
    <option *ngFor="let country of countries" [ngValue]="country.id">
        {{country.name}}
    </option>
</select>

ngModel在Angulardart 5中的select标记和Class实例上无法正常工作

2 个答案: