如何在自定義表格組件中使用子模板來顯示每一行？

我已經嘗試過這麼多的事情，並失敗了，我的代碼最終成爲一團糟。我接受什麼，但，如果你想要一個基地：如何在自定義表格組件中使用子模板來顯示每一行？

最有前途的方法，我發現以下，但不同之處失敗「templateRef.createEmbeddedView不是一個函數」：

應用.component.html

<br> 

<mt-table [fields]="userFields" [(rows)]="users" [pageSize]="10" [searchString]="searchString" 
      class="round"> 

    <template let-row="row"> 
    <td> 
     {{ row.name }} 
    </td> 
    <td> 
     <i class="fa fa-{{ row.gender === 'male' ? 'mars' : 'venus' }}"></i> 
    </td> 
    <td> 
     {{ row.email }} 
    </td> 
    <td> 
     {{ row.phone }} 
    </td> 
    <td> 
     {{ row.address.number }} 
    </td> 
    <td> 
     {{ row.address.street }} 
    </td> 
    <td> 
     {{ row.address.city }} 
    </td> 
    <td> 
     {{ row.address.state }} 
    </td> 
    <td align="center"> 
     <span class="actions show-on-tr-hover"> 
     <i class="fa fa-pencil-square opacity-on-hover"></i> 
     <i class="fa fa-minus-square opacity-on-hover"></i> 
     </span> 
    </td> 
    </template> 

</mt-table>

mtTable.component.html

<thead *ngIf="fields?.length"> 
    <tr> 
     <th 
     *ngFor="let field of fields" 
     [ngClass]="{ 'sortable': field.isSortable }" 
     (click)="activateColumn(field)"> 
     {{ field.label }} 

     <span *ngIf="field.isSortable" class="sorting"> 
      <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && !field.reverseOrder }">&#9650;</div> 
      <div class="arrow" [ngClass]="{ 'active-sorting': field === activeColumn && field.reverseOrder }">&#9660;</div> 
     </span> 
     </th> 
    </tr> 
    </thead> 

    <tbody *ngIf="rows?.length"> 
    <tr *ngFor="let row of getPaginatedRows()" 
     (click)="onRowClick(row)" class="clickable"> 
     <template [ngTemplateOutlet]="rowTemplate" [ngOutletContext]="{ row: row }"></template> 
    </tr> 
    </tbody> 

    <tfoot *ngIf="pageSize"> 
    <tr> 
     <td [attr.colspan]="fields?.length"> 
     <mt-table-pagination 
      [rows]="getProcessedRows()" 
      [pageSize]="pageSize" 
      [(output)]="pagination"> 
     </mt-table-pagination> 
     </td> 
    </tr> 
    </tfoot> 

</table>

您有沒有想過爲什麼會失敗或知道任何可能的替代方法？

來源

2017-06-16 Jesús Cruz

此處未發佈的所有內容都正常工作，並直接將模板內容複製到mtTable.component.html中，按預期填充表格。無論如何，請隨時申請您可能會感興趣查看的其他代碼（或者直接查看[github repo]（https://github.com/jesuscc1993/angular2-table-demo/tree/dev）））。 –

感謝您的github回購 – yurzui

我會

@ViewChildren(TemplateRef) rowTemplate: TemplateRef<any>;

與

@ContentChild(TemplateRef) rowTemplate: TemplateRef<any>;

取代，因爲我想用模板從光DOM

參見

What's the difference between @ViewChild and @ContentChild?

來源

2017-06-16 19:45:51 yurzui

因此，我認爲ViewChildren只查找呈現的html，但ContentChild查找html，無論它是否呈現？無論如何，我仍然會得到同樣的例外。 –

是的，'ContentChild'查找父組件中的組件標籤之間的內容 – yurzui

我的歉意。我錯誤地將其更改爲ContentChild * ren *。它現在正常工作。你有我最深切的感激之情。 –

如何在自定義表格組件中使用子模板來顯示每一行？

回答

相關問題