我使用以下方法使用mat-cell
显示多个*ngFor
:
columns = [
{ columnDef: 'qty', header: 'Qty', cell: (row: SaleItem) => `${row.quantity}` },
{ columnDef: 'discount', header: 'Discount', cell: (row: SaleItem) => `${row.discount}` }
];
salesItemsDisplayedColumns = this.columns.map(x => x.columnDef);
html文件:
<mat-table [dataSource]="salesItemsDataSource">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<mat-header-cell *matHeaderCellDef>{{ column.header }}</mat-header-cell>
<mat-cell *matCellDef="let row">
{{column.cell(row)}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="salesItemsDisplayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns:salesItemsDisplayedColumns"></mat-row>
</mat-table>
现在在mat-cell
里面我没有&#39;想要显示对象属性,但我希望包含<input>
,如下所示:
<mat-cell *matCellDef="let row">
<input type="text" [(ngModel)]="column.cell(row)">
</mat-cell>