mat图标元素没有'；当我在angular中使用innerHtml时，t显示图标文本而不是图标形状

我想通过innerHtml向我的组件动态添加mat图标，但结果是图标文本而不是图标形状

这是我的模板变量：

edit_template = `
  <button mat-icon-button color="primary" (click)="clicked()">
    <mat-icon aria-label="Edit data">edit</mat-icon>
  </button>
`;

edit_模板=`
编辑
`;

下面是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>

{{displayedColumn}}

结果是

edit

word而不是edit图标

除了上面提到的问题，即使是

edit

word也不能作为按钮，而只是作为文本

---

你的想法是什么？

使用这种方式，你不需要编辑HTML

{{element[displayedColumn]}

我终于成功了

以下是我的解决方案：

修改定义：

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>

{{displayedColumn}}
这里被忽略了
{{element[displayedColumn]}
{{element[displayedColumn]}

---

结果正如我所期望的。

元素[displayedColumn]

是通用变量，并且我的值不是mat icon。也许我应该分离这些元素并为它们定义特定的格式。但我不喜欢这样的事情。最好使用较少的编码正确显示所有值。不能使用

[innerHTML]

插入角度组件或指令。有关详细信息，请参见和链接的。