Javascript 在所需组件内创建动态组件的角度

我试图在

html表

的每个td子项中动态创建一个组件。 我创建了一个

表

组件，就像下面的代码一样（在

app.component.html中

）

我试图通过使用

ComponentFactoryResolver

动态创建角度组件。为了绘制此组件，我使用了

ViewContainerRef

。但这似乎不是正确的方法。因为我无法通过此方法在td组件内创建我的

CustomInputComponent

。

---

我想做的是，在每个td元素中嵌入CustomInputComponent。你可以看到我到现在为止写的东西。

你需要创建一个对象数组，其中包含要呈现的道具和组件类型，然后在html部分，你可以有一个

ngFor

循环来迭代该对象数组。在

ngFor

循环中，使用多个

ngSwitchCase

为当前迭代提供正确的控制

---

请查看此链接：

您得到了什么结果？这将帮助我们更好地理解您的问题而不是

document.getElementById

谢谢，我可能试图通过艰难的方式解决问题。根据我的解决方案，这更容易。。。

<div class="container">
  <table class="table">
    <thead>
        <tr>
            <th scope="col" *ngFor="let column of columns">{{column}}</th>
         </tr>
    </thead>
    <tbody #preGrid id="focusItem">

    </tbody>
  </table>
</div>

ngOnInit() {
    let tableItem = document.getElementById("focusItem");
    let lastTR;
    for (let i = 0; i < 12; i++) {
      if (i % this.columns.length == 0) {
        let tr = document.createElement("tr");
        tableItem.appendChild(tr);
      }
      lastTR = this.getLastNode(tableItem);
      let td = document.createElement("td");
      lastTR.appendChild(td);

      const factory = this.resolver.resolveComponentFactory(
        CustomInputComponent
      );
      this.container.createComponent(factory);
    }
  }