角度材质表中的每一行动态添加一个html按钮

如何解决角度材质表中的每一行动态添加一个html按钮

我已经做了一个代码来生成基于动态行和列的数据表。我需要在每行的最后一列添加一个 html 按钮进行编辑。怎么做。下面是代码

<div class="example-table-container" >
        <table mat-table [dataSource]="data" class="example-table"
             matSort matSortActive="created" matSortdisableClear matSortDirection="desc">
        <ng-container *ngFor="let disCol of this.columnheading | keyvalue; let colIndex = index" matColumnDef="{{disCol.key}}">
          
            <th mat-header-cell *matHeaderCellDef><b>{{disCol.value}}</b></th>
            <td mat-cell *matCellDef="let element">{{element[disCol.key]}}</td>
        </ng-container>
  
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

当我在 value 中插入 html 代码时，按钮没有出现，但只有 html 代码出现这样

<button>Edit</button>

我也尝试了 bypassSecurityTrustHtml。它给出了错误 safeValue must use [property]=binding:

解决方法

Angular 材质表提供了一个带有一些 css 的 stickyend 属性。通常我们会添加一个额外的 th 和 stickyend 来解决这个问题。

下面是一个例子..

<ng-container matColumnDef="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon>
</td>
</ng-container>

https://stackblitz.com/angular/nneoarrlekb?file=src%2Fapp%2Ftable-sticky-columns-example.html

<table mat-table [dataSource]="data" class="example-table"
             matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
        <ng-container *ngFor="let disCol of this.columnHeading | keyvalue; let colIndex = index" matColumnDef="{{disCol.key}}">
            <th mat-header-cell *matHeaderCellDef ><b >{{disCol.value}}</b></th>
            <td mat-cell *matCellDef="let element" [innerHtml]="element[disCol.key]"></td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;">
        </tr>
      </table>

我已经使用了innerhtml

尝试添加这个

   <ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef></mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
    <button mat-icon-button color="warn" (click)="onDelete(row.$key)"><mat-icon>delete_outline</mat-icon></button>
  </mat-cell>
</ng-container>

不要忘记在displayColumns中添加这一列

  displayedColumns: string[] = ['fullName','email','mobile','city','departmentName','actions'];

我和你遇到了类似的困境，这就是我想出来的。

首先，尝试将 html 按钮标记添加为值不是解决方案，类似于 html 注入。

给定一组示例列，

const columnHeadings = ['position','firstName','lastName','actions'];
const displayNames = ['No.','First Name','Last Name','Actions'];

我们可以动态填充我们的表格。我在这里所做的是根据所需列触发的条件为我的一列“操作”呈现不同的内容。

<table mat-table [dataSource]="data" class="example-table">
  <ng-container matColumnDef="{{disCol}}" *ngFor="let disCol of columnHeadings; index as i">
    <th mat-header-cell *matHeaderCellDef> {{displayNames[i]}} </th>
    <td mat-cell *matCellDef="let element">
      <div *ngIf="column!=='actions'"> {{element[disCol]}} </div>
      <div *ngIf="column==='actions'">
        <button mat-icon-button>
          <mat-icon>edit</mat-icon>
        </button>
      </div>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnHeadings"></tr>
  <tr mat-row *matRowDef="let element; columns: columnHeadings;" class="element-row"></tr>
</table>

从来没有一种非常优雅的方式来执行这个，但它是一种有效的方法；即使它有点像“黑客”解决方案。