1

我有这张桌子：

<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（即每一行）来检查这一点。
有没有办法实现这种绑定？

4

1 回答 1

1

您需要将 ngModel 放在选择而不是选项上。每次您选择一个选项而不是选项本身时，都是您的选择“改变”并且正在设置。看这个例子： https ://stackblitz.com/angular/vkkalkxbmrok?file=app%2Fselect-form-example.ts

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

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

我不确定您是否可以指定我只想要该选择的子对象，但这是您可以使用的完美案例：

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

Angular 6 Material mat-select 更改方法已删除

每次您的选择更改时都会调用它。

public setPrescriptionId(event: {id:string, description: string}, prescription: IYourPrescriptionInterface) {
    prescription.idObject = event.id;
}
于 2019-07-05T09:19:39.397 回答