Angular 垫输入绑定 [值] 到 [(ngModel)]

Question

我有这个table:

<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
    }
  ]

table 的每一行代表这个数组的一个对象。在每一行中都有一个 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 放在 select 而不是选项上。 "changes" 是你的 select 并且每次你选择一个选项而不是选项本身时都会被设置。看这个例子： https://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts

编辑：好的，我知道你想在这里做什么。您想要在每个处方中设置 idObject。在 select 上绑定 ngModel 将从 selectedObjects 复制整个 selected 对象，而不仅仅是 ID：

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

我不确定您是否可以指定我只想要那个 select 的一个子对象，但这是您可以使用的完美案例：

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

每次 selection 改变时都会调用此方法。

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

Angular 垫输入绑定 [值] 到 [(ngModel)]

Angular mat-input bind [value] to [(ngModel)]

angular

binding

angular7

mat-input