In Tabelle auf Tabellenzeile dynamisch Angular 2

Question

Im Moment habe ich eine Implementierung von Angular2-Datatable wie so

<table class="table table-sm responsive" [mfData]="users" #mf="mfDataTable" [mfRowsOnPage]="10"> 
    <thead> 
     <tr> 
      <th> 
       &nbsp; 
      </th> 
      <th> 
      <mfDefaultSorter by="name">Name</mfDefaultSorter> 
      </th> 
      <th class="no-sort hidden-sm-down"> 
      <mfDefaultSorter by="role">Roles</mfDefaultSorter> 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let person of mf.data"> 
      <td> 
      <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> 
       <button type="button" class="btn btn-warning" (click)="open(person)"> 
        <i class="fa fa-fw fa-edit"></i> 
       </button>      
      </td> 
      <td> 
      <h6> 
       <span> 
        <a href="mailto:{{person.email}}"> 
         <i class="fa fa-envelope"></i> 
        </a> 
       </span> 
       {{person.firstName}} {{person.lastName}} 
      </h6> 
      </td> 
      <td> 
      <h6>{{person.role}}</h6> 
      </td> 
     </tr> 
     <tr *ngIf="(mf.data).length === 0"> 
      <td colspan="100">No matches</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="12"> 
      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

Was mag ich in der Lage sein, ist ein Kind Tisch zu tun erstellen, wenn die open() Griff abgefeuert wird. Ich habe dies bereits in Angular JS getan, aber ich habe es schwer, herauszufinden, wie man das mit Angular 2 macht. Muss ich eine neue Komponente erstellen und die Vorlage mit jQuery in die Zeile laden?

Answer 1

Ich nehme an, dass Sie diese Tabelle unter der Zeile der Person laden möchten.

Sie könnten es so versuchen, mit dem template -Element.

<tbody> 
    <!-- wrap that template-element around your row(s) --> 
    <template ngFor let-person [ngForOf]="mf.data"> 
     <tr> 
     <td> 
      <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> 
       <button type="button" class="btn btn-warning" (click)="open(person)"> 
        <i class="fa fa-fw fa-edit"></i> 
       </button>         
      </div> <!-- this was missing ! --> 
     </td> 
     <td> 
      <h6> 
       <span> 
        <a href="mailto:{{person.email}}"><i class="fa fa-envelope"></i></a> 
       </span> 
       {{person.firstName}} {{person.lastName}} 
      </h6> 
     </td> 
     <td><h6>{{person.role}}</h6></td> 
     </tr> 
     <!-- .. your new table will be shown under that 'data-row' .. --> 
     <tr *ngIf="person.showDetails"> <!-- any condition here to show details .. ! --> 
     <td> 
      <table> 
       <!-- insert your data here .. ! --> 
      </table> 
     </td> 
     </tr> 
    </template> 
    <tr *ngIf="(mf.data).length === 0"> 
     <td colspan="100">No matches</td> 
    </tr> 
</tbody> 

Live-Demo: https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview

Answer 2

Neben this answer (und unter Bezugnahme auf https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview) habe ich folgendes zu meinem Code die geöffneten Elemente zu verstecken (wie ein Akkordeon):

toggleDetails(person: any) { 
    for (let obj of this.persons) { 
     obj.hasOwnProperty("showDetails") ? obj['showDetails'] = false : false; 
    } 
item.showDetails = !item.showDetails; 
} 

Zwei Dinge, über die ich mir Sorgen mache: Erstens, ich bin mir nicht sicher, was passiert, wenn das Array von Objekten persons in Bezug auf die Leistung groß wird. Zweitens wäre es schön, den Eigenschaftsnamen showDetails mit einer Variablen (oder sogar einer Konstante) zu verbinden, die sowohl in der Vorlage als auch in den Komponententeilen in Bezug auf Verkapselung und DRY verwendet werden würde.