Angular使用*ngFor遍历对象渲染自定义HTML元素的正确方法

Angular 默认对{{}}插值表达式输出的内容开启XSS安全转义，所有HTML标签都会被识别为纯文本输出，不会解析生成真实DOM，这是框架默认的安全防护行为，不是语法错误。

基础渲染方案 #

替换原有的插值写法，使用Angular内置的[innerHTML]属性绑定，直接将HTML字符串绑定到目标元素的innerHTML属性上，框架会自动解析合法HTML标签生成对应DOM：

<div *ngFor="let project of projectList">
  <div [innerHTML]="project.previewHTMLElement"></div>
</div>

可信内容处理 #

Angular 内置的DomSanitizer会自动过滤HTML里的危险内容（比如未授权的script标签、事件属性），如果你确认传入的HTML内容完全可信、不存在XSS注入风险，遇到内容被强制转义的情况，可以先将HTML标记为安全内容再绑定：

1. 首先在组件中注入DomSanitizer服务，编写安全HTML转换方法：

import { Component, DomSanitizer, SafeHtml } from '@angular/core';
import { PROJECTLIST, Project } from './project-definition'; // 替换为你实际的接口、常量定义路径

@Component({
  selector: 'app-project-showcase',
  templateUrl: './project-showcase.component.html'
})
export class ProjectShowcaseComponent {
  projectList: Project[] = PROJECTLIST;

  constructor(private sanitizer: DomSanitizer) {}

  parseSafeHtml(rawHtml: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

2. 模板中调用转换方法绑定内容：

<div *ngFor="let project of projectList">
  <div [innerHTML]="parseSafeHtml(project.previewHTMLElement)"></div>
</div>

• 你当前在previewHTMLElement字符串里写的{{project.name}}是Angular模板插值语法，写在静态字符串里不会被框架解析执行，最终会原样输出到img的src属性中，导致资源路径错误。你需要在定义常量时直接拼接好真实路径，或者在组件初始化阶段遍历列表批量替换占位符，不要在待渲染的HTML字符串里留模板插值语法。修正后的常量定义示例：

export const PROJECTLIST: Project[] = [
  {
    id: 1, 
    name: 'a-cool-name', 
    description: 'a cute description', 
    previewHTMLElement: '<img src="assets/images/a-cool-name.png">'
  }
]

• [innerHTML]渲染的内容不会经过Angular模板编译，如果你要渲染的HTML里包含Angular指令、事件绑定、数据绑定这类动态逻辑，不要用这个方案，需要换用动态组件、ngTemplateOutlet等方式实现，静态HTML内容渲染用上述方案即可。

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