Как использовать объект child в качестве значения в select без совпадения имени свойства

Question

Я хочу установить в поле выбора значение, указанное в repairData свойстве reportShiftId, но оно не работает. С другой стороны, если я создаю объект Shift внутри repairData и ссылаюсь на него с reportShift.id, он работает.

В нерабочем коде, когда я меняю repairData.reportShiftId, который является моделью выбора, опция выбора не делает изменить, но после того, как я выбрал что-то вручную в select, ngModel начинает работать правильно.

Не работает код:

export class RepairData {
    reportShiftId: number;
    ...
}

-

<select class="form-control" name="shift" [(ngModel)]="repairData.reportShiftId">
      <option *ngFor="let shift of shifts" [ngValue]="shift.id">{{shift.name}}</option>
</select>

Рабочий код:

export class RepairData {
    reportShift: Shift;
    ...
}

-

<select class="form-control" name="shift" [(ngModel)]="repairData.reportShift.id">
      <option *ngFor="let shift of shifts" [ngValue]="shift.id">{{shift.name}}</option>
</select>

Как использовать reportShiftId (число) вместо reportShift.id (Shift.number)?

Answer 1

Попробуйте реализовать функцию сравнения с так:

<select class="form-control" name="shift" [compareWith]="compareWithFunction" [(ngModel)]="repairData.reportShiftId">
      <option *ngFor="let shift of shifts" [ngValue]="shift.id">{{shift.name}}</option>
</select>

 compareWithFunction(item1,item2){
   return item1 && item2 ? item1.id === item2.id : item1 === item2;
  }

Answer 2

Я знаю, в чем проблема. После того как я изменил атрибут name html с shift на reportShift (то же имя, что и у свойства объекта), он начал работать.

На самом деле я думаю, что у меня было больше чем один выберите с тем же name, так что это может быть проблемой.