Hierarichal Gitter mit kantigem JS 2

Question

Ich versuche Hierarchical Grid in meiner Angular 2 Anwendung ähnlich wie diese http://demos.telerik.com/kendo-ui/grid/hierarchy

umzusetzen Also begann ich aus zwei components zu schaffen. Die Parent Component ist für Elterntabelle und Child Component ist für untergeordnete Tabelle. Wenn Sie also auf Zeile aus der übergeordneten Tabelle klicken, wird die untergeordnete Tabelle direkt darunter geladen (wie im obigen Beispiel).

Dies ist, wie mein html wie

<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> 

Aber ich habe zwei Fragen aussieht:

1) Wie Kind Tisch in DOM auf einer korrekten Position laden? Das Problem ist, wenn meine Elterntabelle gerendert wird, werden alle Zeilen mit der Anweisung ngFor erstellt. Wenn Sie jetzt auf eine Zeile klicken, wie lädt man die untergeordnete Tabelle direkt darunter? Wie kann ich den Standort identifizieren?

2) Um untergeordnete Tabelle zu laden, habe ich gedacht, DynamicComponentLoader Klasse zu verwenden, aber sieht aus wie die Kommunikation zwischen Components wird nicht möglich sein, wenn DCL verwenden.

Bitte machen

Answer 1

ich in der Lage war, Ihre Anforderungen mit der Vorlage Syntax ngFor

pre 2.0.0-beta.17 Syntax zu erfüllen:

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

2.0.0 -beta.17 Syntax:

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

Check out this plunker

In Ihrer Situation wird es sein:

<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> 

Die isInvoiceOpened() Funktion true zurück, wenn diese bestimmte Zeile geöffnet wird. Das bedeutet, dass Sie ein Array haben sollten, um geöffnete Reihenindizes, d. H.