角+ PrimeNg: ngTemplateOutlet的问题

Question

我想在我的模板和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不能使用来自app.component.html的let-rowData？有什么解决办法吗？

Answer 1

我也有同样的问题，我的解决办法是：

1. 在我的-table.Component.ts中，我使用了一个QueryList来注册所有模板。

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

1. 在mytable.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>

我相信会有更好的解决方案，但这是我发现的愤怒。我希望这能帮助你和其他人帮助我们找到更好的解决方案。