Angular+PrimeNg：ngTemplateOutlet传递模板至TurboTable报错问题

这个问题我之前也碰到过，核心原因是模板转发时丢失了PrimeNG TurboTable传递的上下文数据，咱们一步步拆解：

为什么会报错Cannot read property 'vin' of undefined？ #

PrimeNG的p-table在渲染表体模板时，会自动为每一行生成rowData等上下文变量，并注入到标记了pTemplate="body"的模板中。但你原来的写法是直接用ngTemplateOutlet把父组件的模板转发给p-table，没有把p-table生成的rowData传递给父组件的模板，导致模板里的let-rowData拿不到任何值，自然就报错了。

另外还有一个小问题：你直接转发的模板没有被p-table识别为它的表头/表体模板——p-table只会识别带有pTemplate属性的内部ng-template，而不是通过ngTemplateOutlet输出的外部模板。

解决方案 #

我们需要在自定义组件内部，先创建p-table能识别的表头/表体模板，再在这些模板内部转发父组件传入的模板，同时传递必要的上下文数据。

1. 修改my-table.component.html #

<p-table [value]="cars" sortField="brand" sortMode="single">
  <!-- 转发表头模板：表头无需额外上下文，直接输出即可 -->
  <ng-template pTemplate="header">
    <ng-template [ngTemplateOutlet]="tableHeader"></ng-template>
  </ng-template>

  <!-- 转发表体模板：传递p-table生成的rowData上下文 -->
  <ng-template pTemplate="body" let-rowData>
    <ng-template 
      [ngTemplateOutlet]="tableBody" 
      [ngTemplateOutletContext]="{ $implicit: rowData }"
    ></ng-template>
  </ng-template>
</p-table>

2. 调整my-table.component.ts（可选优化） #

把private修饰符去掉，确保模板能正常访问这两个模板引用：

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'my-table',
  templateUrl: './my-table.component.html'
})
export class MyTableComponent {
  // 假设你有测试数据
  cars = [
    { vin: '1HGCM82633A123456', color: 'Black', year: 2023 },
    { vin: '1HGCM82633A654321', color: 'White', year: 2022 }
  ];

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

3. 父组件模板保持不变 #

你的app.component.html代码无需修改，let-rowData会通过$implicit接收我们传递的上下文数据。

扩展：传递更多上下文变量 #

如果你的父组件模板还用到了rowIndex等其他变量，只需要在ngTemplateOutletContext里一并传递即可：

<ng-template pTemplate="body" let-rowData let-index="rowIndex">
  <ng-template 
    [ngTemplateOutlet]="tableBody" 
    [ngTemplateOutletContext]="{ $implicit: rowData, rowIndex: index }"
  ></ng-template>
</ng-template>

父组件模板里就能用let-index="rowIndex"拿到对应的值了。

内容的提问来源于stack exchange，提问作者Roland Rácz