Question

这是使用primeng制作Table的原始html标记。我认为这个标题部分和正文部分应该从Parent html注入。

[这是原始p表代码]

<p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
                <span *ngIf="col.type === 'text'">
                    {{ col.caption | translate }}
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="rowData.checkbox">
                </span>
                <span *ngIf="col.type === 'text'">
                    {{ rowData[col.fieldName] }}
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

[我将上面的代码更改为以下代码]

     <p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableHeader"></ng-container>
         </ng-container>
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableBody"></ng-container>
         </ng-container>
     </p-table>

     <ng-template #gridTableHeader>
         <ng-content select=".grid-table-header"></ng-content>
     </ng-template>
     <ng-template #gridTableBody>
         <ng-content select=".grid-table-body"></ng-content>
     </ng-template>

这是父html

<grid-table *ngIf="lower" [setting]="lower" [clickedEvent]="event">
    <div class="grid-table-header">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                    <span *ngIf="col.type === 'text'">
                        {{ col.caption | translate }}
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                </th>
            </tr>
        </ng-template>
    </div>
    <div class="grid-table-body">
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="rowData.checkbox">
                    </span>
                    <span *ngIf="col.type === 'text'">
                        {{ rowData[col.fieldName] }}
                    </span>
                </td>
            </tr>
        </ng-template>
    </div>
</grid-table>

此代码没有错误，但表格数据未显示在视图中。但我可以识别表格可以正确获取数据，因为只有分页区域显示在视图中。

所以我想如果在p-table标签运行之前运行ng-template绑定就行了。

但我不知道该怎么做。

你可以给我一些建议吗？

Answer 1

我不知道你的问题是否已经解决，但在我的情况下，pTemplate标题，正文等需要在p-table组件中。

此外，您需要为您的身体创建一个上下文，这是我的工作代码的片段：

<p-table class="ui-g-12" [value]="rows" [rows]="pagination.pageSize" [totalRecords]="pagination.totalItems">

      <ng-template pTemplate="header">
        <ng-container *ngTemplateOutlet="columnsTemplate ? columnsTemplate : defaultHeader;"></ng-container>
      </ng-template>

      <ng-template pTemplate="body" let-rowData>
        <ng-container *ngTemplateOutlet="bodyTemplate ? bodyTemplate : defaultBody; context: {$implicit: rowData}"></ng-container>
      </ng-template>
</p-table>

第二档：

<div class="ui-g">
  <ng-template #tableColumns>
    <tr>
      <!-- Columns here -->
    </tr>
  </ng-template>
  <ng-template #tableBody let-company>
    <tr>
     <!-- Your data here -->
    </tr>
  </ng-template>
  <generic-table #table [columnsTemplate]="tableColumns" [bodyTemplate]="tableBody"></generic-table>
</div>

我希望它会对你有所帮助！

Angular5 - 将ng-template父组件传递给子组件

1 个答案: