将按钮动态添加到垫表角材料答案

【问题标题】：Dynamically add button to the mat-table angular material将按钮动态添加到垫表角材料
【发布时间】：2020-12-26 01:53:15
【问题描述】：

如何动态添加带有编辑和删除按钮的操作列。我有以下设置

父组件中的数据源

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', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', action:`<a (click)="openDialog('Update',element)">Edit</a> | <a (click)="openDialog('Delete',element)">Delete</a>` },
];

 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>

【问题讨论】：

动态行操作需要什么？什么时候出现delete btn？
因为表格列是动态的，我不能对列进行硬编码。如果是这样，我怎么不知道下面的答案将不起作用。
从api获取数据后，可以在列中推送delete列。
我明白你的意思，但是专栏的内容呢，你能举个例子吗
我的回答对你有帮助吗？

标签： angular typescript angular-material angular9 angular10

【解决方案1】：

例如

<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>

【讨论】：

【解决方案2】：

正如您在 cmets 中向我解释的那样，我提供了一个 stackblitz 示例。

见there

【讨论】：