时间戳

首页 > 解决方案 > 如何在 Angular 动态数据表中创建双向绑定？

angular - 如何在 Angular 动态数据表中创建双向绑定？

问题描述

我使用的动态数据表如下：

<table class="table table-striped table-hover" mat-table matSort (matSortChange)="sortData($event)" dir="rtl"
  [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns" matColumnDef="{{column.columnDef}}">
    <div>
      <th mat-header-cell *matHeaderCellDef> {{column.label}}</th>
    </div>
    <td mat-cell *matCellDef="let row; let index = index" class="cells">
      <mat-form-field>
      <input matInput [placeholder]="column.label" [value]="column.cell(row, column)">
    </mat-form-field>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr (click)="showContent(row)" class="rows" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

这是我用于构建列和数据源的打字稿代码：

let mhd = {
    columnDef: eachColumns['columnName'],
    label: eachColumns['displayName'],
    cell: (row, c) => {
        return row[c.columnDef];
    }
};
this.columns.push(mhd)

this.displayedColumns = this.columns.map(c => c.columnDef);
this.dataSource = new MatTableDataSource(this.result);

我更改了输入数据然后 console.log(this.result) 但在控制台中我看到了 Previous 对象。

如果我更改为[(value)]="column.cell(row, column)" 我在控制台中收到以下错误：

core.js:14597 错误错误：未捕获（承诺中）：错误：模板解析错误：解析器错误：ng:// [column.cell(row, column)=$event] 中第 25 列的意外标记“=” /ReportModule/MainGridReportComponent.html@14:51 ("= index" class="cells"> ][(value)]="column.cell(row, column)"> "): ng:///ReportModule/MainGridReportComponent .html@14:51

标签： angularangular-material

解决方案

它是双向绑定的正确方式：

 [(ngModel)]="row[column.columnDef]"

推荐阅读