Angular + PrimeNg: проблема с ngTemplateOutlet

Я хочу создать новый «слой» между моими шаблонами и TurboTable PrimeNg, чтобы использовать дополнительные функции и возможности, которые я пишу, поэтому я хочу передать два ng-template моему собственному компоненту, а от него - p-table, но он не работает.

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

In 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-rowData из app.component.html? Есть какое-нибудь решение?


angular primeng angular-template primeng-turbotable
person Roland Rácz    schedule 26.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

У меня такая же проблема, и есть мое решение:

  1. В my-table.component.ts я использовал QueryList для регистрации всех шаблонов.

    @ContentChildren(PrimeTemplate) templates: QueryList<any>;

  2. В 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>

  3. В итоге моя витрина выглядит так:

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

Я уверен, что будут лучшие решения, но это то, что я нашел. Я надеюсь, что это поможет вам и кто-то поможет нам найти лучшее решение.

person cjsalvatierra    schedule 07.02.2018