我想通过innerHtml向我的组件动态添加mat-icon,但是结果是图标文本而不是图标形状。
这是我的模板变量:
edit_template = `
<button mat-icon-button color="primary" (click)="clicked()">
<mat-icon aria-label="Edit data">edit</mat-icon>
</button>
`;
这是innerHtml:
<table mat-table [dataSource]="this.dataSource">
<div *ngFor="let displayedColumn of displayedColumns">
<ng-container [matColumnDef]="displayedColumn">
<th mat-header-cell *matHeaderCellDef> {{displayedColumn}} </th>
<td mat-cell *matCellDef="let element" [innerHTML]="element[displayedColumn]"></td>
</ng-container>
</div>
</table>
结果是edit
字,而不是编辑图标!
除了提到的问题,甚至edit
单词也不能充当按钮,而只是一个文本!
你有什么想法?
答案 0 :(得分:1)
使用这种方式,您无需编辑HTML
<mat-icon>{{element[displayedColumn]}}</mat-icon>
答案 1 :(得分:-1)
最终我做到了!
这是我的解决方法:
修改定义:
edit_template = `edit`;
,并且在html文件中,我使用了ngIf
:
<table mat-table [dataSource]="this.dataSource">
<div *ngFor="let displayedColumn of displayedColumns">
<ng-container [matColumnDef]="displayedColumn">
<th mat-header-cell *matHeaderCellDef> {{displayedColumn}} </th>
<td mat-cell *matCellDef="let element">
<div *ngIf="element[displayedColumn] === 'edit' || element[displayedColumn] === 'delete';then content else other_content">here is ignored</div>
<ng-template #content>
<button mat-icon-button color="primary">
<mat-icon>{{element[displayedColumn]}} </mat-icon>
</button>
</ng-template>
<ng-template #other_content>{{element[displayedColumn]}} </ng-template>
</td>
</ng-container>
</div>
</table>
结果和我预期的一样。