Angular 12 使用*ngFor循环渲染外部HTML文档列表显示[object Object]求解

你遇到的[object Object]报错本质是两个常见错误叠加导致的：

1. 模板中使用{{ }}插值语法绑定了HTML内容对象，插值只会将对象序列化为字符串输出，无法渲染HTML
2. 批量加载时要么没有正确获取HTTP返回的纯文本HTML内容，要么没有用Angular的安全API标记HTML为可信任内容，导致内容被默认XSS策略拦截

1. 导入依赖并定义数据结构 #

首先在组件中导入必要依赖，定义文档的存储结构：

import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 定义文档项结构
interface DocumentItem {
  name: string;
  content?: SafeHtml;
  loading: boolean;
}

2. 注入依赖并实现加载逻辑 #

在组件构造函数中注入依赖，实现批量加载和安全处理逻辑：

export class DocListComponent {
  docList: DocumentItem[] = [];

  constructor(
    private http: HttpClient,
    private sanitizer: DomSanitizer
  ) {
    // 初始化160份文档的基础信息
    this.docList = Array.from({length: 160}, (_, index) => ({
      name: `文档${index + 1}`,
      loading: false
    }))
  }

  // 加载单个文档内容
  loadSingleDoc(doc: DocumentItem, filePath: string) {
    doc.loading = true;
    // 必须指定responseType为text，否则默认解析为JSON对象
    this.http.get(filePath, {responseType: 'text'}).subscribe(rawHtml => {
      // 标记HTML为安全可信任内容，绕过Angular默认XSS过滤
      doc.content = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
      doc.loading = false;
    })
  }

  // 批量加载所有文档
  loadAllDocs() {
    this.docList.forEach((doc, index) => {
      // 替换为你实际的HTML文件路径
      this.loadSingleDoc(doc, `assets/docs/doc-${index + 1}.html`);
    })
  }
}

3. 调整模板渲染逻辑 #

模板中使用[innerHTML]属性绑定处理后的HTML内容，不要用插值语法：

<button (click)="loadAllDocs()">加载全部文档</button>

<div *ngFor="let doc of docList" class="doc-item">
  <h4>{{doc.name}}</h4>
  <div *ngIf="doc.loading">加载中...</div>
  <div *ngIf="doc.content" [innerHTML]="doc.content"></div>
</div>

• 如果你的HTML文件包含内联脚本、样式等特殊内容，Angular仍然会过滤掉风险内容，如需保留需额外调整安全策略，请自行评估XSS攻击风险
• 160份文档一次性加载会产生大量并行请求，可能导致页面卡顿，建议按需加载或配合Angular CDK虚拟滚动优化性能

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