当我在angular中使用innerHtml时,mat-icon元素不显示图标文字,而不显示图标形状

时间:2019-07-16 20:37:02

标签: angular angular-material icons innerhtml

我想通过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单词也不能充当按钮,而只是一个文本!

你有什么想法?

2 个答案:

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

结果和我预期的一样。