Изменение значения Mat-select не распространяется через двустороннюю привязку - PullRequest
Новая
       32

Изменение значения Mat-select не распространяется через двустороннюю привязку

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

На стороне HTML у меня есть: 

    <mat-select #footageSelects [(ngModel)]="selectedItems[element.id]">
      <ng-container *ngFor='let opt of element.items; index as index'>
        <mat-option [value]="opt">{{opt.label}}
        </mat-option>
      </ng-container>
    </mat-select>

На стороне TS у меня есть: 

@ViewChildren('footageSelects') _footageSelects: QueryList<ElementRef>;
....

this._footageSelects.toArray().map(x => {
    setTimeout(() => {
        //sets a value in the select if not defined or no more in the options
        if (!x['options'].some(y => y['value'] === x['value'])) {
            x['value'] = x["options"]["first"]["value"];
        }
    });
});

Этот код описывает список mat-select компонентов, которые могут быть обновленыесли выбранного значения больше нет в списке их возможных вариантов.Моя проблема в том, что каждый из них связан двусторонним связыванием с записями объекта selectedItems, но при присвоении x['value'] = ... новое значение не распространяется в selectedItems.Нелегко изменить словарь в приведенном выше фрагменте, поскольку у меня нет соответствующего ключа.Есть ли метод, отличный от x['value'] = ..., который бы сохранял здесь двойную привязку?

Вот пример поведения, на которое я указываю:

https://stackblitz.com/edit/angular-tdsywh

1 Ответ

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

Это потому, что вы предоставляете объекты в качестве значений для ваших опций.

Если вы сделаете это, вы должны предоставить пользовательское сравнение для вашего выбора, , как описано в документации 

<mat-select #footageSelects [(ngModel)]="selectedItems[element.id]" [compareWith]="customCompare">
  <ng-container *ngFor='let opt of element.items; index as index'>
    <mat-option [value]="opt">{{opt.label}}
    </mat-option>
  </ng-container>
</mat-select>

customCompare(o1, o2) {
  return o1.id === o2.id;
}
...