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

Question

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

有我的桌子

 <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 列下进行编辑和删除。

Answer 1

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

Answer 2

我有一个解决方案，但并不完美。

<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 !== 'action' ? column : ''}}
    </th>
  <ng-container *ngIf="column !== 'action'">
    <td mat-cell *matCellDef="let aliasesData">
       <span>{{aliasesData[column]}}</span>
    </td>
    </ng-container>
  <ng-container *ngIf="column === 'action'">
    <td mat-cell *matCellDef="let aliasesData">
       <span>
         <button>Edit</button>
         <button>Delete</button>
       </span>
    </td>
  </ng-container>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

您可以使用ngIf绑定来检查列操作并仅显示按钮。

---

或有 2 列显示阵列

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

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

并将一个用于渲染，另一个用于底部的配置，并在ngFor绑定之后将操作作为单独的部分。

<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">
            <span>{{aliasesData[column]}}</span>
        </td>
    </ng-container>
    <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>
            actions
        </th>
        <td mat-cell *matCellDef="let aliasesData">
            <button>Edit</button>
            <button>Delete</button>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsForConfig"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsForConfig;"></tr>
</table>