Typescript Angular 动态嵌套键 ngModel

发布于07月25日

如何在ngModel中使用动态键？

这是html模板

<p-table [columns]="cols" [value]="data">
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <input type="text" pInputText [(ngModel)]="rowData[col.field]"/>
      </td>
    </tr>
  </ng-template>
</p-table>

这是"cols"变量

cols = [
      { field: 'variables.code', header: 'Code' },
      { field: 'variables.name', header: 'Name' },
];

这是一个数据示例

[{
  "variables": {
     "code": "D44D5",
     "name": "keyboard"
  }
}]

推荐答案

你可以做下面这样的事情，你可以拆分col.field.split('.') as fieldName，然后形成ngModel，像这样rowData[fieldName[0]][fieldName[1]].

<div *ngFor="let rowData of rows;">
  <div *ngFor="let col of columns;">
    <ng-container *ngIf="getValue(rowData, col.field) as fieldName">
      <input type="text" [(ngModel)]="fieldName" />
    </ng-container>
  </div>
</div>

getValue(rowData, fieldPath) {
    const fieldName = fieldPath
      .replace(/[\[\]']+/g,'.')
      .split('.')
      .filter(i => i);
    console.log(fieldName);
    const field = fieldName.reduce((acc, f) => acc[f], rowData)
    return field;
}

Stackblitz

注:当对象具有嵌套 struct 时，上述两种用例都适用.