Angular 16中对象绑定HTML代码无法渲染为实际控件的问题

问题原因 #

Angular 默认会对插值表达式 {{ }} 中的内容做HTML转义处理，目的是防范XSS攻击，因此你的HTML标签会被转换成实体字符（比如 < 变成 <），最终以文本形式展示，而非实际的DOM元素。

解决步骤 #

1. 替换插值表达式为 [innerHTML] 属性绑定 #

将模板中渲染 obj.gender 的代码从插值表达式改为 [innerHTML] 属性绑定，这是Angular中渲染HTML字符串的标准方式：

原模板代码：

<span> {{ obj.gender }} </span>
<span> {{ obj.name }} </span>

修改后：

<span [innerHTML]="obj.gender"></span>
<span> {{ obj.name }} </span>

2. 优化HTML字符串定义（可选） #

你当前的 htmlMF 是转义后的实体字符串（比如 < 代表 <），可以直接改用原始HTML格式，代码可读性更高：

原TS代码：

htmlMF = '<select id="testType" name="testType" formControlName="testType"><option>Male</option><option>Female</option></select>';

修改后：

htmlMF = `<select id="testType" name="testType" formControlName="testType">
  <option>Male</option>
  <option>Female</option>
</select>`;

如果必须保留转义后的字符串，需要先解码为原始HTML：

// 添加解码函数
decodeHtml(html: string): string {
  const textArea = document.createElement('textarea');
  textArea.innerHTML = html;
  return textArea.value;
}

// 初始化obj时传入解码后的内容
obj = {
  name: this.name,
  gender: this.decodeHtml(this.htmlMF),
};

3. 处理不可信内容的安全风险（可选） #

如果你的HTML字符串来自用户输入或其他不可信源，需要使用 DomSanitizer 将其标记为安全HTML，避免Angular阻止渲染：

首先在组件中注入 DomSanitizer：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  htmlMF = '<select id="testType" name="testType" formControlName="testType"><option>Male</option><option>Female</option></select>';
  name = 'xyz';
  obj: { name: string; gender: SafeHtml };

  constructor(private sanitizer: DomSanitizer) {
    // 标记HTML为安全
    const safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlMF);
    this.obj = {
      name: this.name,
      gender: safeHtml
    };
  }
}

模板代码仍使用 [innerHTML] 绑定即可。

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