1

我想在我的模板和 PrimeNg 的 TurboTable 之间创建一个新的“层”，以使用我编写的其他功能和特性，所以我想将两个传递ng-template给我自己的组件，然后从它传递给p-table，但它不起作用。

在我的app.component.html：

  <my-table>
    <ng-template #tableHeader pTemplate="header">
      <tr>
        <th>Vin</th>
        <th>Color</th>
        <th>Year</th>
      </tr>
    </ng-template>
    <ng-template #tableBody pTemplate="body" let-rowData>
      <tr>
        <td>{{rowData.vin}}</td>
        <td>{{rowData.color}}</td>
        <td>{{rowData.year}}</td>
      </tr>
    </ng-template>
  </my-table>

在my-table.component.html：

<p-table [value]="cars" sortField="brand" sortMode="single">
  <ng-template [ngTemplateOutlet]="tableHeader" ></ng-template>
  <ng-template [ngTemplateOutlet]="tableBody"></ng-template>
</p-table>

在my-table.component.ts我有这些：

  @ContentChild('tableHeader')
  private tableHeader: TemplateRef<any>;

  @ContentChild('tableBody')
  private tableBody: TemplateRef<any>;

我得到的错误：

ERROR TypeError: Cannot read property 'vin' of undefined.

为什么p-table不能使用let-rowDatafrom app.component.html？有什么解决办法吗？

4

1 回答 1

1

我有同样的问题，有我的解决方案：

  1. 在 my-table.component.ts 我使用 QueryList 来注册所有模板。
    @ContentChildren(PrimeTemplate)
    templates: QueryList<any>;
  1. 在 my-table.component.html
    <p-table [value]="data">
            <ng-template let-item [pTemplate]="template.name" *ngFor="let template of templates">
              <ng-template *ngTemplateOutlet="template.template; context: { $implicit: item }"></ng-template>
            </ng-template>
        </p-table>
  1. 最后我的展示是这样的：
    <hn-table [data]="cars">
            <ng-template pTemplate="header">
                <tr>
                    <th>Vin</th>
                    <th>Year</th>
                    <th>Brand</th>
                    <th>Color</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-item>
                <tr>
                    <td>{{item.vin}}</td>
                <td>{{item.year}}</td>
                <td>{{item.brand}}</td>
                <td>{{item.color}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary">
            summary!!
        </ng-template>
      </hn-table>

我相信会有更好的解决方案，但这是我发现的。我希望这可以帮助您和有人帮助我们找到更好的解决方案。

于 2018-02-07T11:59:44.647 回答