Question

我想在我的模板和PrimeNg的TurboTable之间创建一个新的'layer'来使用我编写的其他函数和功能，所以我想将两个ng-template传递给我自己的组件，并从它传递给{{ 1}}，但它不起作用。

在我的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-rowData？有没有解决方案？

Answer 1

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

在my-table.component.ts中，我使用QueryList来注册所有模板。

@ContentChildren(PrimeTemplate) templates: QueryList<any>;
在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>
最后我的展示如下：

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

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

Angular + PrimeNg：ngTemplateOutlet问题

1 个答案: