如何解决动态将按钮添加到垫台角材料
如何动态添加带有编辑和删除按钮的操作列。我有以下设置
父组件中的数据源
columns: MatTable[] = [
{ columnDef: 'position',header: 'No.',cell: (element: any) => `${element.position}` },{ columnDef: 'name',header: 'Name',cell: (element: any) => `${element.name}` },{ columnDef: 'weight',header: 'Weight',cell: (element: any) => `${element.weight}` },{ columnDef: 'symbol',header: 'Symbol',cell: (element: any) => `${element.symbol}` },{ columnDef: 'action',header: 'action',cell: (element: any) => `${element.action}` }
];
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1,name: 'Hydrogen',weight: 1.0079,symbol: 'H',action:`<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>` },{ position: 2,name: 'Helium',weight: 4.0026,symbol: 'He',action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },{ position: 3,name: 'Lithium',weight: 6.941,symbol: 'Li',{ position: 4,name: 'Beryllium',weight: 9.0122,symbol: 'Be',{ position: 5,name: 'Boron',weight: 10.811,symbol: 'B',{ position: 6,name: 'Carbon',weight: 12.0107,symbol: 'C',{ position: 7,name: 'Nitrogen',weight: 14.0067,symbol: 'N',{ position: 8,name: 'Oxygen',weight: 15.9994,symbol: 'O',{ position: 9,name: 'Fluorine',weight: 18.9984,symbol: 'F',{ position: 10,name: 'Neon',weight: 20.1797,symbol: 'Ne',];
dataSource = ELEMENT_DATA;
ngOnInit(): void {
this.matTableConfig.columns = this.columns;
this.matTableConfig.filter = false;
this.matTableConfig.dataSource = this.dataSource;
}
在子组件中
@Input() matTableConfig: MatTableConfig;
<table mat-table [dataSource]="matTableConfig?.dataSource" matSort>
<ng-container *ngFor="let column of matTableConfig?.columns" matColumnDef={{column.columnDef}}>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.header }} </th>
<td mat-cell *matCellDef="let element"> {{ column.cell(element) }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="columns.length">No data matching the filter</td>
</tr>
</table>
解决方法
正如您在评论中向我解释的那样,我提供了一个让人眼花stack乱的示例。
请参阅there
,例如
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef style="text-align: right;">{{tr[82].a}}</th>
<td mat-cell *matCellDef="let element" style="text-align: right;">
<button mat-icon-button (click)="delProd(element)" [matTooltip]="tr[82].a + ' ' + element.id">
<mat-icon style="color: crimson">delete</mat-icon>
</button>
</td>
</ng-container>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。