ngModel не работает нормально с тегами select и экземплярами Class в Angulardart 5 - PullRequest
Новая
       8

ngModel не работает нормально с тегами select и экземплярами Class в Angulardart 5

0 голосов
/ 08 ноября 2018

В теге 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;
}

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Я нашел проблему:

Использование функции identifier () для сравнения значений в select_control_value_accessor для select ngModel вместо ==.

Я открыл проблему 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>
0 голосов
/ 08 ноября 2018

Есть ли что-то похожее на угловое сравнение с директивой сравнения?

Вы можете использовать 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>
...