点击

时间:2018-07-20 22:34:06

标签: angular angular2-template angular-directive

我无法动态加载组件。

我以他们文档中所需的相同方式实现了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>

问题是,当我单击任何表行时,只会实例化第一个组件。

当前结果:

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

所需结果:点击第二行和第六行:

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

1 个答案:

答案 0 :(得分:0)

尝试一下,对我来说很好。

hideme = {};

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

并在.ts中将Hideme声明为

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.TextInputLayout>

</LinearLayout>

选中此link