Angular 15中innerHtml渲染表格<tr><td>数据全在第一列问题

问题详情 #

从HTTP请求拿到带<TR>/<TD>标签的字符串，用Angular的[innerHtml]渲染到表格<tbody>时，所有数据都堆在第一列，浏览器检查器里<tbody>下只有纯文本，没有<tr>/<td>结构。但用React的dangerouslySetInnerHTML渲染完全相同的内容却正常显示。

相关代码如下：

数据解析代码 #

const parser = new DOMParser();
const xml = parser.parseFromString(res.toString(), "text/xml");
this.dataContent = xml.querySelector("TABLEDATA")?.innerHTML;

dataContent格式 #

<TR><TD>[some data]</TD><TD>[some data]</TD>...</TR><TR>...</TR>

Angular表格模板 #

<table id="first-table">
    <thead>
        <tr>
            <th>_id</th>
            <th>_time</th>
            <th>_ra</th>
            <th>_dec</th>
        </tr>
    </thead>
    <tbody [innerHtml]="dataContent"></tbody>
</table>

React对比代码 #

<tbody dangerouslySetInnerHTML={{ __html: ref.current }}></tbody>

问题原因 #

1. XML解析的结构冲突：用text/xml类型解析HTML表格内容，DOMParser会按XML规则处理标签，提取innerHTML时可能丢失HTML表格所需的结构信息，或者把标签转换成不符合HTML解析规则的格式。
2. Angular的安全清理机制：Angular的DomSanitizer默认会对绑定到innerHtml的内容做安全检查，对于XML解析出的大写标签或不规范结构，可能过滤掉标签只保留文本。而React的dangerouslySetInnerHTML不会自动清理，直接插入原始内容。

解决方案 #

方案1：改用HTML格式解析内容（推荐） #

把DOMParser的解析类型从text/xml改为text/html，确保解析后的内容是标准HTML结构：

const parser = new DOMParser();
const doc = parser.parseFromString(res.toString(), "text/html");
this.dataContent = doc.querySelector("TABLEDATA")?.innerHTML;

方案2：手动信任HTML内容 #

如果必须用XML解析，可通过DomSanitizer告诉Angular该内容是安全的，跳过默认清理：

1. 注入DomSanitizer服务：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  dataContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  processData(res: any) {
    const parser = new DOMParser();
    const xml = parser.parseFromString(res.toString(), "text/xml");
    const rawHtml = xml.querySelector("TABLEDATA")?.innerHTML || '';
    this.dataContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

2. 模板保持原写法不变：

<tbody [innerHtml]="dataContent"></tbody>

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