添加桌到桌行動態角2

Question

我現在有像這樣

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

的Angular2-Datatable實現我希望能夠做的就是創建一個子表的時候開（）手柄被激發。我之前在Angular JS中做過這個，但是很難弄清楚如何用Angular 2做到這一點。我是否需要創建一個新組件並使用jQuery將模板加載到行中？

Answer 1

我假設你想在該人的行下加載該表。

您可以使用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> 

實時演示：https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview

Answer 2

除了this answer（並參考https://plnkr.co/edit/pzOBJtg2S7sO2vckbUjr?p=preview）添加以下到我的代碼隱藏打開的元素（如手風琴）：

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

我擔心的兩件事：首先不確定如果對象陣列persons在性能方面越來越大，會發生什麼情況。其次，將showDetails屬性名稱連接到一個變量（甚至是一個const），這個變量將在模板和組件部分中用於封裝和DRY。