单击时动态加载组件数组答案

【问题标题】：Loading an array of components dynamically on click单击时动态加载组件数组
【发布时间】：2018-12-29 06:36:51
【问题描述】：

我在动态加载组件时遇到问题。

我实现了 angular 的动态组件加载器，其方式与他们文档中所需的方式相同： https://angular.io/guide/dynamic-component-loader

我想做的是为每个动态组件设置一个 ng for 循环

<ng-container *ngFor="let rowData of TableData">
  <tbody [attr.data-index]="rowIndex">
    <tr click="loadComponentForIndex()">Some Data</tr>
    <ng-container *ngIf="isRowShown(rowIndex)">
      <ng-template dynamicallyLoadedComponent></ng-template>
    <ng-container>
  </tbody>
</ng-container>

问题是当我点击任何表格行时，只有第一个组件被实例化。

当前结果：

一些数据
动态加载组件
一些数据
一些数据
一些数据
一些数据

期望结果：点击第 2 行和第 6 行：

一些数据
一些数据
动态加载的组件
一些数据
一些数据
一些数据
一些数据
动态加载的组件
一些数据
一些数据
一些数据
一些数据

【问题讨论】：

标签： angular angular2-template angular-directive

【解决方案1】：

试试这个，这对我来说很好。

  <tbody *ngFor="let rowData of TableData;let i=index">
    <tr (click)="hideme[i] = !hideme[i]">Some Data</tr>
    <tr [hidden]="hideme[i]">{{getContent()}}</tr>
  </tbody>

并在 .ts 中将 hideme 声明为，

hideme = {};

//your dynamic data
  getContent(){
    return " Dynamic child data";
  }

检查这个link

【讨论】：