Angular 创建不工作的动态组件

在代码下动态创建组件，但不渲染，其显示在空元素中

应用程序组件.ts

我的json：

从json迭代组件

ngOnInit() {
      // this.iterate(keys: any)
      var griditem;

      for(var i=0;i<this.comp[0].grids.length;i++)

      {
        if(this.comp[0].grids[i].ty=='grid'){
          griditem='<div> sample Grid';
              for(var j=0;j<this.comp[0].grids[i].components.length;j++)
              {
                if(this.comp[0].grids[i].components[j].ty=='tb'){
                  griditem = griditem +'<input matInput placeholder='Favorite food' value='Sushi'>';
                }else if(this.comp[0].grids[i].components[j].ty=='bt'){
                  griditem = griditem +'<div> sample Button'+j+' </div>';
                }
              }
              griditem= griditem +'</div>';              

        }
        this.renderedGrid = this.renderedGrid+griditem;
      }


}

ngOnInit（）{
//this.iterate（键：any）
var griditem；
对于（var i=0；i如果我理解正确，整个方法看起来像是角度组件系统的反模式。但听起来问题真的是：如何迭代模型以生成角度材料组件

答案是ngFor，ngIf，下面是您当前模型的一个示例

不在typescript中添加任何代码，模型除外

在HTML中，您可以执行以下操作

<div *ngFor="let component of comp">
  <mat-grid-list cols="4" rowHeight="100px" *ngFor="let grid of component.grids">
    <mat-grid-tile *ngFor="let gridComponent of grid.components">
      <div *ngIf="gridComponent.ty=='tb'">
        <input matInput placeholder="Favorite food">
      </div>
      <div *ngIf="gridComponent.ty=='bt'">
        <button md-button>Click me!</button>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>


点击我！

对于每个组件，我们可以使用ngFor
对于每个网格列表，我们可以使用ngFor创建一个组件，在每个组件内部，我们可以使用ngIf确定要添加的标签类型


像这样创建的按钮组件和输入组件

<div *ngFor="let component of comp">
  <mat-grid-list cols="4" rowHeight="100px" *ngFor="let grid of component.grids">
    <mat-grid-tile *ngFor="let gridComponent of grid.components">
      <div *ngIf="gridComponent.ty=='tb'">
       <input-comp></input-comp>
      </div>
      <div *ngIf="gridComponent.ty=='bt'">
       <button-comp></button-comp>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

你想做什么？我尝试了基于json响应创建组件，json上面有两个网格，第一个网格有两个组件，第二个网格有一个组件。因此，首先我找到网格是否可用，如果有网格，然后绘制网格并检查任何组件，如果有组件，然后绘制组件。在这里，matinput组件没有呈现，如果我使用的是普通的p标记，那么它呈现为一个HTMLCreat@lancovici，示例工作正常。是否可以呈现组件并注入html页面？我的意思是，创建了单独的输入组件和按钮组件。现在直接编写输入标记，而不是直接从组件注入htmlNt wiseit听起来像是你在尝试生成一个可以自己重新编程的web应用程序。这是真的吗？是的，最初app.component.html parent div只存在一次构造所有json值，然后在特定屏幕中只在dom中呈现，所以首先我要构造所有值，并将其保存在一个变量中并放在dom中。所以我有json值in app.component.ts我必须构建基于json的组件，并将其放入app.component.html。任何可能的方法都可以这样做。使用现有组件生成基于json的html是可能的。您在这里提到的是基于json生成组件，然后使用它们重新绘制html文件，这是不可能的.Angular只能为您呈现内容，实际上是Angular CLI编译它并将其与webpack打包，然后您手动部署它。因此，您所谈论的内容听起来像：1.读取json文件，2.生成角度组件。3.基于新角度组件生成组件html文件。4.编译角度项目。5.部署Angular pro这一切都需要一个后端框架和对本地文件系统的访问（如nodejs/express和一些其他软件包）。没有一个像angular这样的前端框架提供。好的，完成了，我明白了。我尝试了你之前给出的内容，只是在app.component.html文件中更改了上面的行，而不是直接输入标记。我只是更改了组件选择器的呈现，我通过ts文件本身尝试了这一点。
<div *ngFor="let component of comp">
  <mat-grid-list cols="4" rowHeight="100px" *ngFor="let grid of component.grids">
    <mat-grid-tile *ngFor="let gridComponent of grid.components">
      <div *ngIf="gridComponent.ty=='tb'">
        <input matInput placeholder="Favorite food">
      </div>
      <div *ngIf="gridComponent.ty=='bt'">
        <button md-button>Click me!</button>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<div *ngFor="let component of comp">
  <mat-grid-list cols="4" rowHeight="100px" *ngFor="let grid of component.grids">
    <mat-grid-tile *ngFor="let gridComponent of grid.components">
      <div *ngIf="gridComponent.ty=='tb'">
       <input-comp></input-comp>
      </div>
      <div *ngIf="gridComponent.ty=='bt'">
       <button-comp></button-comp>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>