我想在表格中显示weight.name。我能够通过转换数据来做到这一点。但是,我不想以任何形式操纵数据。我尝试将行模板 (
weight
) 中的 weight.name
更改为 displayedColumns
但根本没有返回任何数据。
App.component.html
<table mat-table [dataSource]="dataSource">
<ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
<th mat-header-cell *matHeaderCellDef> {{col}} </th>
<td mat-cell *matCellDef="let element"> {{element[col]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
App.component.ts
import { Component } from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: any;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: {name: 5.55}, symbol: 'H'},
{position: 2, name: 'Helium', weight: {name: 5.55}, symbol: 'He'},
{position: 3, name: 'Lithium', weight: {name: 5.55}, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: {name: 5.55}, symbol: 'Be'},
{position: 5, name: 'Boron', weight: {name: 5.55}, symbol: 'B'},
{position: 6, name: 'Carbon', weight: {name: 5.55}, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: {name: 5.55}, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: {name: 5.55}, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: {name: 5.55}, symbol: 'F'},
{position: 10, name: 'Neon', weight: {name: 5.55}, symbol: 'Ne'},
];
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
}
这是 stackblitz 链接供参考。 https://stackblitz.com/edit/angular-mat-table-dynamic-columns-x36dvr?file=src%2Fapp%2Fapp.component.ts
您的问题是,您将权重列显示为 row[col] 或 rowInstance['weight'],它显示权重对象的
toString()
,导致 [object object]
。
将表格模板修改为:
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
<mat-cell *matCellDef="let row">{{row.position}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="weightName">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let row">{{row.weight.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let row">{{row.symbol}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns">
</mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</table>
并在您的
ts
文件中,将显示列修改为:
`displayedColumns: string[] = ['position', 'name', 'weightName', 'symbol'];`
https://stackblitz.com/edit/angular-mat-table-dynamic-columns-w7do4c?file=src/app/app.component.html
将上游数据模型转换/扁平化为如下所示,并保持模板不变。
[{position: 1, name: 'Hydrogen', weightName: 5.55, symbol: 'H'},...]
我也遇到过类似的问题,我解决如下。
displayedColumns: string[] = ['position', 'name', 'weight.name', 'symbol'];
app.component.ts
中写一个方法如下findColumnValue = (element:unknown, column:string):string => <string>column.split('.').reduce((acc, cur) => acc[cur], element);
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.split('.')[0]}} </th>
<td mat-cell *matCellDef="let element"> {{findColumnValue(element, column)}} </td>
</ng-container>
eval
方法没问题的话,可以按如下方式使用findColumnValue = (element:unknown, column:string):string => eval(`element.${column}`);
您可以在 displayedColumns 数组中使用点表示法访问嵌套对象
示例:
displayedColumns: string[] = ['position', 'name', 'weight.name', 'symbol'];
在表格 HTML 中,您需要在
weight.name
中引用点符号
matColDef
您的 HTML:
<ng-container matColumnDef="weight.name">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let row">{{row.weight.name}}</mat-cell>
</ng-container>
我们可以使用点(.)表示法来引用数据集中的嵌套对象值。
const lookUpClients = [
{shortName: 'KA', entityStatus: { code: 'ACTIV'}}
]
<MaterialTable
onRowClick={useCallback((event, data) => setSelectedRow(data))}
options={{
exportButton: false,
filtering: false,
paging: false,
search: true,
}}
columns={[
{ field: 'shortName', title: 'Short Name' },
{ field: 'entityStatus.code', title: 'Status'}, // we can able to mention in the following way to display data
]}
data={lookUpClients}
title={''}
/>