Angular中使用keyvalue管道处理嵌套对象渲染HTML的问题

我有一个包含嵌套对象的Data常量，希望在组件中渲染其中的HTML内容。尝试使用keyvalue管道配合*ngFor循环，将嵌套对象的title属性绑定到子组件的[title]输入属性，同时渲染HTML内容，但未能成功，嵌套循环也无法解决问题。

原Data常量代码 #

export const Data: any = {
  obj1: {
    text: `<h3>Title1</h3>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
    title: `Some copy`,
  },
  obj2: {
    text: `<h3>Title2</h3>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
    title: `Some copy`,
  },
  obj3: {
    copy: `<h3>Title3</h3>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
    <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
    title: `Some copy`,
  },
};

尝试的模板代码 #

<app-comp
  *ngFor="let item of data | keyvalue"
  [title]="item.title"
>
  <div>{{item.value}}</div>
</app-comp>

问题分析与解决方案 #

核心错误点

1. 输入属性绑定错误：keyvalue管道返回的item对象中，title属性属于item.value，而非item本身，原代码的[title]="item.title"会绑定到undefined。
2. HTML渲染方式错误：用{{item.value}}会把HTML文本转义输出，无法渲染成实际的HTML元素，必须使用[innerHTML]指令。
3. 属性名不一致：obj3的HTML内容属性是copy，而obj1/obj2是text，需要兼容这两种属性名。

修正后的模板代码

<app-comp
  *ngFor="let item of data | keyvalue"
  [title]="item.value.title"
>
  <div [innerHTML]="item.value.text || item.value.copy"></div>
</app-comp>

子组件输入属性定义（确保子组件能接收title）

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-comp',
  template: `<h4>{{title}}</h4><ng-content></ng-content>`
})
export class AppCompComponent {
  @Input() title!: string;
}

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