我已经做了一个代码来生成基于动态行和列的数据表。我需要在每行的最后一列添加一个 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:
答案 0 :(得分:0)
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
答案 1 :(得分:0)
<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
答案 2 :(得分:0)
尝试添加这个
<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'];
答案 3 :(得分:0)
我和你遇到了类似的困境,这就是我想出来的。
首先,尝试将 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>
从来没有一种非常优雅的方式来执行这个,但它是一种有效的方法;即使它有点像“黑客”解决方案。