动态 Angular Material Table 具有动态显示的列并附加额外的静态列以进行操作

Question

HTML:
如您所见，下面我编写了 Material Table 结构的代码，我的问题是关于-向此动态 material [=27= 添加一个静态列（即操作） ].

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

打字稿： 正如您在下面看到的，我在打字稿文件中声明了一个变量，一个用于显示列（即 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);
      }
    })
  }

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>

动态 Angular Material Table 具有动态显示的列并附加额外的静态列以进行操作

Dynamic Angular Material Table with Dynamic Displayed Columns and Attaching extra static Column for Action

angular-material

angular

material-table