如何在Angular Material表格单元格中渲染HTML内容？

核心原因 #

Angular默认会自动转义插值语法{{ }}中的HTML内容，以此防范XSS攻击，所以<br>这类标签会被当成普通文本渲染，无法生效。

解决方案 #

1. 改用[innerHTML]绑定

用Angular的属性绑定[innerHTML]替代插值语法，让浏览器直接解析HTML内容：

<!-- 错误示例：插值语法导致标签转义 -->
<mat-card>{{ 'first line <br> here should be a new line' }}</mat-card>

<!-- 正确示例：innerHTML解析HTML标签 -->
<mat-card [innerHTML]="'first line <br> here should be a new line'"></mat-card>

2. 处理用户输入的HTML内容（安全防护）

如果HTML内容来自用户输入，直接使用[innerHTML]存在XSS风险，需要通过DomSanitizer标记内容为安全HTML：
组件代码：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-html-render',
  template: '<mat-card [innerHTML]="trustedHtml"></mat-card>'
})
export class HtmlRenderComponent {
  trustedHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const userInput = 'first line <br> here should be a new line';
    // 标记内容为安全HTML，避免XSS过滤
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(userInput);
  }
}

⚠️ 注意：仅当你完全信任输入来源时使用此方法，避免恶意脚本注入。

3. 适配Angular Material特定组件

大部分Material组件（如mat-list-item、mat-label、mat-chip）都支持[innerHTML]绑定，直接替换插值语法即可：

<mat-list-item [innerHTML]="'主内容 <br> 次要内容'"></mat-list-item>

内容的提问来源于stack exchange，提问作者Anna