angular - 以角度迭代对象打字稿

Question

我正在使用 Angular Formly 在我的页面上创建动态内容。

我用这个模板创建了一个“部分”组件：

@Component({
 selector: 'section',
 template: `
 <section *ngFor="let component of to">
    <h1 *ngIf="component.type == 'h1'">{{component.label}}</h1>
    <p *ngIf="component.type == 'text'">{{component.label}}</p>
    <a *ngIf="component.type == 'button'" href="{{ component.goTo }}">{{ component.label }}</a>
 </section>
 `,
})
export class SectionComponent extends FieldType {}

在Formly的领域，我有一个例子可以测试：

    {
      type: 'section',
      templateOptions: {
        component1: {
          type: 'h1',
          label: 'Section title',
        },
        component2: {
          type: 'text',
          label: 'Inside section text',
        },
        component3: {
          type: 'button',
          label: 'Inside section button',
          goTo : '/myeditor',
        },
      }
    }

根据 Formly 文档，ngFor 中的“to”指的是 templateOptions。

但是，呈现此代码返回：

<section></section>

这意味着可能 ngFor 无法正确解析 templateOptions 上存在的组件。

PS：模板没有ngFor的其他组件（除了SectionComponent）可以正常工作并正确呈现。

标签： angulartypescriptobjectngfor