以角度迭代对象打字稿

时间:2021-03-11 10:31:31

标签: angular typescript object ngfor

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

我用这个模板创建了一个“section”组件:

  select distinct name, CardId from (
        select name, CardId, Count(*) over(partition by CardId) c
        from t
    )x
    where c>1

在 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 {}

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

但是,呈现此代码返回:

    {
      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',
        },
      }
    }

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

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

0 个答案:

没有答案