对象文字的属性中可以有一个组件由 ngComponentOutlet 渲染吗？

Question

我想在某个列布局中使用 ngComponentOutlet 渲染每个组件，之后我将对其进行样式设置，但是我在此 widgetsByCol 中的

component

属性中得到 null，但我在 html 中只有 null，因为在执行控制台时.log() 我看到那里的组件。 （解决这个问题后，我想动态渲染它们，而不像我那样定义

widgets

）

这是ts代码：

export class WidgetListComponent implements OnInit {
  widgets: WidgetInterface[] = [
    { component: Test1Component, layoutCol: 1 },
    { component: Test2Component, layoutCol: 2 },
    { component: Test3Component, layoutCol: 3 },
    { component: Test3Component, layoutCol: 2 }
  ];

  widgetsByCol = {};

  ngOnInit(): void {
    for (const widget of this.widgets) {
      const { layoutCol, component } = widget;
      if (!this.widgetsByCol[layoutCol]) {
        this.widgetsByCol[layoutCol] = [];
      }
      this.widgetsByCol[layoutCol].push(component);
    }

    console.log('this.widgetsByCol', this.widgetsByCol);
  }
}

html代码：

{{widgetsByCol | json}}
<div *ngFor="let col of widgetsByCol | keyvalue">
  <div *ngFor="let widget of col.value">
    <ng-container *ngComponentOutlet="widget.component"> </ng-container>
  </div>
</div>

这个

{{widgetsByCol | json}}

输出： { "1": [ null ], "2": [ null, null ], "3": [ null ] } 然而console.log输出：

{
  1: [Test1Component],
  2: [Teste2Component, Teste3Component],
  3: [Test3Component]
}

那么这里发生了什么？有人可以帮我吗？ 预先感谢

Answer 1

您的代码非常接近工作。您在模板中引用

widget.component

而不是简单地引用

widget

时出现错误。

<ng-container *ngComponentOutlet="widget"></ng-container>

您看到控制台输出和

json

管道输出之间存在差异的原因是因为

json

管道对您的对象进行了字符串化。如果您自己调用 JSON.stringify()，您将看到相同的结果：

console.log('this.widgetsByCol (stringified)', JSON.stringify(this.widgetsByCol));
// {"1":[null],"2":[null,null],"3":[null]}

堆栈闪电战