Угловая привязка входного значения [значение] к [(ngModel)]

Question

У меня есть эта таблица:

<table class="mat-elevation-z8">
          <tr *ngFor="let prescription of prescriptions" class="mat-row">
            <td>
              <mat-form-field class="">
                <input  [value]="prescription.description" matInput placeholder="Description">
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="">
                  <mat-select>
            <mat-option *ngFor="let object of selectedObjects" [value]="object.id" [(ngModel)]="prescription.idObject">
              {{object.description}}
            </mat-option>
          </mat-select>
        </mat-form-field>   
            </td>
            <td>
              <button mat-button class="delete" (click)="check(prescription)">delete</button>
            </td>
          </tr>
        </table>

где мой массив рецептов имеет такую ​​структуру:

 prescriptions = [
    {
      id: 1,
      description: "Prescrizione 1",
      date1: new Date(),
      date2: new Date(),
      idObject: 0
    },
    {
      id: 2,
      description: "Prescrizione 2",
      date1: new Date(),
      date2: new Date(),
      idObject: 0
    }
  ]

Каждая строка таблицы представляет объект этого массива. В каждом ряду есть mat-select элемент, который берет свои варианты из этого selectedObjects массив:

"selectedObjects": [
        {
            "id":1, "description": "Desc1"
          },
          {
            "id":2, "description": "Desc2"
          },
          {
            "id":3, "descrizione": "Desc3"
          }

Чего я хочу добиться, так это связать значение выбранного параметра, то есть object.id в собственность idObject элемента строки. Так что я сделал, использовал [value]="object.id" [(ngModel)]="prescription.idObject" но это не работает, так как свойство остается 0 для всех строк. Я проверил это, напечатав свойство в методе check (то есть для каждого ряда).
Есть ли способ реализовать такую ​​привязку?

Answer 1

Вы должны поставить ngModel на выбор, а не вариант. Это ваш выбор, который "изменяется" и устанавливается каждый раз, когда вы выбираете опцию, а не саму опцию. Посмотрите на этот пример: https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts

РЕДАКТИРОВАТЬ: хорошо, я получил то, что вы пытаетесь сделать здесь. Вы хотите установить idObject внутри каждого рецепта. Привязка ngModel к выбранным объектам скопирует весь выбранный объект из selectedObjects, а не только идентификатор:

{"id":2, "description": "Desc2"}

Я не уверен, что вы можете указать, я просто хочу подобъект этого выбора, но это идеальный случай, когда вы можете использовать:

(selectionChange)="setPrescriptionId($event, prescription)"

Угловой 6 Материал коврик выбран метод изменения удален

Это будет вызываться каждый раз, когда изменяется ваш выбор.

public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
    prescription.idObject = event.id;
}