时间戳

首页 > 解决方案 > 如何将按钮编辑/删除添加到 mat-table

angular - 如何将按钮编辑/删除添加到 mat-table

问题描述

我想在我的“动作”列中有两个垫子按钮，一个是编辑，一个是删除。

有我的桌子

 <table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let aliasesData"> {{aliasesData[column]}} </td>
  </ng-container>

有 columnsToDisplay

columnsToDisplay = ['id', 'domain_id', 'source', 'action'];

我想在每行按钮的 Action 列下进行编辑和删除。

标签： angularangular-material

解决方案

<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
        <ng-container *ngFor="let col of tab.table_columns" [matColumnDef]="col.name">
            <ng-container *ngIf="col.name !== 'action' ">
                <th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
                <td mat-cell *matCellDef="let element"> {{ element[col.name] }}</td>
            </ng-container>
            <ng-container *ngIf="col.name === 'action' ">
                <th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
                <td mat-cell *matCellDef="let element"><button>View Details</button></td>
            </ng-container>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
    </table>

推荐阅读