Angular: двусторонняя привязка с mat-select не работает, присвоение значения в коде приводит к его сбросу в пользовательском интерфейсе

Question

Я пытаюсь связать выбор матов со значением перечисления следующим образом:

<mat-form-field>
  <mat-label>Type</mat-label>
  <mat-select [(ngModel)]="selectedType" [compareWith]="compareType">
    <mat-select-trigger>
      {{types[selectedType]?.name}}
    </mat-select-trigger>
    <mat-option *ngFor="let type of types | keyvalue" [value]="type.key">
      <mat-icon>{{type.value.icon}}</mat-icon> {{type.value.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

И машинопись:

enum Type {
  Hardware = 0,
  Software = 1
}

types: { [TP in number]: { icon: string, name: string }; } = {
  [Type.Hardware]: { icon: 'computer', name: 'Hardware' },
  [Type.Software]: { icon: 'keyboard', name: 'Software' },
};

selectedType: Type;

compareType(type1: Type, type2: Type): boolean {
  return ((type1 as Type) === (type2 as Type));
}

Я хочу, чтобы значение выбора было привязано к selectedType, чего я пытаюсь добиться с помощью [(ngModel)]="selectedType" [compareWith]="compareType".

Проблема в том, что эта привязка данных не полностью идет в обе стороны. Когда я присваиваю значение с помощью пользовательского интерфейса, привязка обновляется соответствующим образом, но когда я обновляю значение в моем коде, оно сбрасывает значение в пользовательском интерфейсе, снова показывая заполнитель. Однако, хотя пользовательский интерфейс отображает его неправильно, значение присваивается правильно.

Answer 1

в вашем коде есть проблема несоответствия типов.

selectedType имеет тип Type, который является числом.

, где вы устанавливаете [value]="type.key" в пределах

<mat-option *ngFor="let type of types | keyvalue" [value]="type.key">

type.key является строкой из-за keyvalue pipe.

в коде выше, когда вы выбираете элемент из выпадающего списка в качестве строкового значения «0» или «1"присваивается selectedType.если вы присваиваете значение программно, например this.selectedType = Type.Hardware, числовое значение 0 присваивается selectedType

, и поскольку ваша функция compareType использует строгое равенство (===), еевозвращает false, потому что 1 === "1" - это false

, который вы можете либо:

• сделать ваши enum Type строковыми значениями;

enum Type {
  Hardware = "0",
  Software = "1"
}

• или преобразовать type.key в число при привязке к mat-option

[value]="+type.key"

• или использовать равенство (==) вместо строгое равенство (===) в функции compareType.(лично я не рекомендую этот!)

  compareType(type1: Type, type2: Type): boolean {
    return ((type1 as Type) == (type2 as Type));
  }

вот рабочая демоверсия