Question

我正在尝试在Hierarchical Grid应用程序中实现Angular 2，类似于此http://demos.telerik.com/kendo-ui/grid/hierarchy

所以我开始创建两个components。 Parent Component用于父表，Child Component用于子表。因此，当从父表中单击行时，子表将在其下方加载（如上例所示）。

这就是我的html的样子

<div class="row">
    <div class="col-md-12">
        <h1>{{pageTitle}}</h1>
        <table class="table table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>User Name</td>
                    <td>Email</td>
                    <td>Billing Method</td>
                </tr>
            </thead>
            <tbody>
                <tr class="master-row" *ngFor="#invoice of invoices; #i = index">
                    <td><button (click)="getDetail(invoice)"><i class="glyphicon glyphicon-chevron-right"></i></button></td>
                    <td>{{invoice.username}}</td>
                    <td>{{invoice.email}}</td>
                    <td>{{invoice.billingMethod}}</td>
                </tr>

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

但我有两个问题：

1）如何在DOM的正确位置加载子表？问题是当我的父表渲染时，所有的行都是使用ngFor指令创建的。现在当点击一行时，如何在它下方加载它的子表？如何识别位置？

2）为了加载子表，我打算使用DynamicComponentLoader类，但看起来使用Components时无法进行DCL之间的通信。

请建议

Answer 1

我能够使用ngFor

的模板语法来满足您的要求

pre 2.0.0-beta.17语法：

<template ngFor #item [ngForOf]="items" #i="index">
    <tr>...</tr>
</template>

2.0.0-beta.17语法：

<template ngFor let-invoice [ngForOf]="invoices" let-i="index">
    <tr>...</tr>
</template>

Check out this plunker

在您的情况下，它将是：

<template ngFor let-invoice [ngForOf]="invoices" let-i="index">
    <tr class="master-row" *ngFor="#invoice of invoices; #i = index">
        <td><button (click)="getDetail(invoice)"><i class="glyphicon glyphicon-chevron-right"></i></button></td>
        <td>{{invoice.username}}</td>
        <td>{{invoice.email}}</td>
        <td>{{invoice.billingMethod}}</td>
    </tr>
    <tr *ngIf="isInvoiceOpened(i)">
        <td colspan="100">
            <child-table [details]="details"></child-table>
        </td>
    </tr>
</template>

如果打开特定行，isInvoiceOpened()函数将返回true。这意味着你应该有一个数组来保存打开的行索引，即

_openedDetails = [];

isInvoiceOpened(i){
  return this._openedDetails.indexOf(i)>-1;
}

getDetail(i){
  let index = this._openedDetails.indexOf(i);
  if(index > -1)
    this._openedDetails.splice(index,1);
  else
    this._openedDetails.push(i);
}

带有Angular JS 2的Hierarichal Grid

1 个答案: