Angular mat表动态创建列与静态更改表外观
很抱歉,如果这个问题很琐碎,我对Angular和WebUI王国非常陌生 我目前正在看这个示例项目: 我改变了创建列的方式(从静态到动态),表格布局也变成了难以阅读的内容。我很难理解这是怎么发生的。我创建专栏的方式有什么不同?但是,最重要的是,我如何修复它 以下是我所拥有的: component.html:Angular mat表动态创建列与静态更改表外观,angular,angular-material,mat-table,Angular,Angular Material,Mat Table,很抱歉,如果这个问题很琐碎,我对Angular和WebUI王国非常陌生 我目前正在看这个示例项目: 我改变了创建列的方式(从静态到动态),表格布局也变成了难以阅读的内容。我很难理解这是怎么发生的。我创建专栏的方式有什么不同?但是,最重要的是,我如何修复它 以下是我所拥有的: component.html: <ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}"> <th mat-
<ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
<td mat-cell *matCellDef="let row"> {{row[column.name]}} </td>
</ng-container>
{{column.label}}
{{row[column.name]}
组件。ts
columns: Array<any> = [
{ name: 'id', label: 'ID', cell: (element: any) => `${element.id}` },
{ name: 'title', label: 'Title', cell: (element: any) => `${element.title}` },
{ name: 'state', label: 'State', cell: (element: any) => `${element.state}` },
{ name: 'url', label: 'Url', cell: (element: any) => `${element.url}`},
{ name: 'created_at', label: 'Created at', cell: (element: any) => `${element.created_at}`},
{ name: 'updated_at', label: 'Updated at', cell: (element: any) => `${element.updated_at}`},
]
// displayedColumns = ['id', 'title', 'state', 'url', 'created_at', 'updated_at', 'actions'];
displayedColumns = this.columns.map(x => x.name).concat(['actions']);
columns:Array我找到了解决方案
使用cdkColumnDef和cdkHeaderCellDef而不是matColumnDef和mat header单元格
<ng-container *ngFor="let column of columns; let colIndex = index" [cdkColumnDef]="column.name">
<mat-header-cell *cdkHeaderCellDef>{{ column.label }}</mat-header-cell>
<mat-cell *cdkCellDef="let row">{{ row[column.name] }}</mat-cell>
</ng-container>
{{column.label}}
{{row[column.name]}
此解决方案适用于角度6+
<ng-container *ngFor="let i = index; let column of columnsToDisplay"
matColumnDef="{{column}}">
<th mat-header-cell *matHeaderCellDef> {{column | titlecase}} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="column !== 'action'">{{element[column]}}</span>
<span *ngIf="column == 'action'">
<button mat-icon-button (click)="deleteRowData(element)"
color="primary">
<mat-icon>delete</mat-icon>
</button>
</span>
</td>
</ng-container>
{{column | titlecase}}
{{元素[列]}}
删除
尝试将'url'
,'created\u at'
等的名称列中的空格去掉。@dmcgrandle谢谢,但它不起作用如何动态添加图标?如果我想为编辑和删除添加图标,怎么做?在静态中很容易,但如何使用通用材料数据表?