具有动态显示列和附加额外静态列以执行操作的动态角度材质表

Question

HTML:
正如您所看到的，下面我已经编写了材料表结构的代码，我的问题是关于-向这个动态材料表添加一个静态列(即Actions(。

<div class="row">
<div class="col-md-12">
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="example-container mat-elevation-z0" style="width: 100%;">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%;" matSort>
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i= index">
<th mat-header-cell *matHeaderCellDef>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{element[column]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator #firstPaginator [pageSize]="6" [pageSizeOptions]="[5, 10, 25, 50, 75, 100]"
aria-label="Select page of users" showFirstLastButtons=""></mat-paginator>
</div>
</div>
</div>

TypeScript:如您所见，我在TypeScript文件中声明了变量，一个用于显示列(即getTableStructure(，另一个则用于显示数据(即getTableData(。

getTablestructure(tableName) {
this.commonservice.Get('tableStructure', tableName).subscribe((response: any) => {
if (response) {
this.tableColumns = response[0].data[0];
console.log('Table Columns: ', this.tableColumns);
this.gettableDropDownValues();
var displayedColumnsTemp = [];
this.tableColumns.forEach(function (column) {
displayedColumnsTemp.push(column.columnname.toString());
});
console.log('displayed Columns temp: ', displayedColumnsTemp)
this.displayedColumns = displayedColumnsTemp;
console.log('Displayed Columns: ', this.displayedColumns);
}
})
}

getTableData(tableName) {
this.commonservice.Get('tableData', tableName).subscribe((response: any) => {
if (response) {
this.tableData = response[0].data[0];
console.log('Table Data', this.tableData);
this.totalLength = response[0].length;
this.selectedObject = this.tableData[0];
this.dataSource = new MatTableDataSource(this.tableData);
console.log('Data Source', this.dataSource);
}
})
}

Answer 1

在*.component.ts中更改：

this.displayedColumns = displayedColumnsTemp;

至：

this.displayedColumns = [...displayedColumnsTemp, 'Actions'];

在*.component.html中更改：

<td mat-cell *matCellDef="let element"> {{element[column]}}</td>

至

<td mat-cell *matCellDef="let element">
<ng-container *ngIf="column !== 'Actions'">
{{ element[column] }}
</ng-container>
<ng-container *ngIf="column === 'Actions'">
{{ /* code here for actions */ }}
</ng-container>
</td>