具有动态显示列并附加额外静态列以进行操作的动态角材料表答案

【问题标题】：Dynamic Angular Material Table with Dynamic Displayed Columns and Attaching extra static Column for Action具有动态显示列并附加额外静态列以进行操作的动态角材料表
【发布时间】：2022-01-11 00:30:21
【问题描述】：

HTML：
如您所见，下面我已经编写了材料表结构的代码，我的问题是关于在这个动态材料表中添加一个静态列（即操作）。

<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 文件中声明了一个变量，用于显示列（即 getTableStruture），另一个用于显示数据（即 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);
      }
    })
  }

【问题讨论】：

标签： angular angular-material material-table

【解决方案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>

【讨论】：