angular - 在 Angular Material Table 单元格中渲染 html

Question

我正在尝试在 Angular Material 中添加 html 内容，但标签在 html 中显示为简单文本 例如“第一行 <br> 。这里应该换行” 我该怎么做？

Answer 1

可以使用innerHTML属性绑定(bind)

<td mat-cell 
  *matCellDef="let element"
  [innerHTML]="element.name">
</td>

TS

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: '<b>Hydrogen</b> <br>Test', 
    ...
  },
  ...
];

输出

<表类="s-表"> <头> 位置 姓名 <正文> 1 氢
测试

Stackblitz