如何将 *ngFor 循环变量的值赋给 angular 动态组件的 @Input 属性？

Question

这里完全重写了问题，因为它看起来写得不好。

我正在尝试使用这个包：

https://www.npmjs.com/package/ng-dynamic-component

用于带有 ngFor 循环变量的动态组件@Input()。

包的作者已经回答了一个 question 似乎解决了我的确切情况。但是我没有让它像答案中建议的那样工作：

<div *ngFor="let tabComponent of tabComponents()">
  <ndc-dynamic 
     [ndcDynamicComponent]="tabComponent.component"
     [ndcDynamicInputs]="{ tabItem: tabComponent }"
  </ndc-dynamic>
</div>

TabContainerComponent 的 tabComponents 数组是这样的：

  public tabComponents: ITabComponent[] = [
    { name: 'SelectedObjects', icon: 'selected-objects', isSelected: true, component: SelectedObjectsComponent },
    { name: 'DummyComponent1', icon: 'pin', isSelected: false, component: DummyComponent },
    { name: 'DummyComponent2', icon: 'selected-objects', isSelected: false, component: Dummy2Component } 
  ]

所有动态选项卡组件都有：

@Input() tabItem: any;

根据文档，我应该像下面这样添加 ndcDynamicInputs:inputs（而不是在 html 中内联：

<div *ngFor="let tabComponent of tabComponents()">
  <ndc-dynamic 
     [ndcDynamicComponent]="tabComponent.component"
     [ndcDynamicInputs]="inputs"
  </ndc-dynamic>
</div>

问题是如何在 ts 中定义 inputs-array class:

inputs = {
  // how to assign tabComponent?
  tabItem: ??
}

那么How to assign value of *ngFor loop variable to angular dynamic component's @Input 属性?

如何赋值

Answer 1

您尝试过 [ndcDynamicInputs]="{ tabItem: tabComponent }" 而不是 [ndcDynamicInputs]="inputs" 吗？

如何将 *ngFor 循环变量的值赋给 angular 动态组件的 @Input 属性？

How to assign value of *ngFor loop variable to angular dynamic component's @Input property?

angular

ng-component-outlet