排序时PrimeNG turbo表模板错误

Question

我正在尝试通过使用在turbo表元素中注入标头模板,ngTemplateOutlet因为它可以在以下代码片段中看到:

<p-table [value]="cars1">
  <ng-template pTemplate="header">
    <ng-container *ngTemplateOutlet="defaultHeader"></ng-container>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td *ngFor="let col of cols">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

前面提到的带有排序的头模板可以在这里看到:

<ng-template #defaultHeader>
  <tr>
    <th *ngFor="let col of cols" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
    </th>
  </tr>
</ng-template>

页面加载后,将引发以下错误:

Error: StaticInjectorError(AppModule)[ScrollableView -> Table]: 
StaticInjectorError(Platform: core)[ScrollableView -> Table]: 
NullInjectorError: No provider for Table

Converting circular structure to JSON

这是一个有效的StackBlitz示例

由于在ngTemplateOutlet我的用例中使用模板头是我的用例的要求,我想请指出我在这里做错了什么？

谢谢 !

Answer 1

我知道这是一个老问题，但我遇到了同样的问题，并且在任何地方都找不到任何有用的东西。

我发现如果我将“Table”类添加到包装器组件的提供程序中，错误就会消失。但随后我还需要 DomHandler、ObjectUtils 和 TableService 的提供程序。

这使得错误消失，并允许将模板传递到包装器中并向下传递到 p 表中。但是，pSortableColumn 和 pSelectableRow 现在只能在包装器组件内的默认模板内工作。

没有错误，因为将 Table 类放入我的包装器的提供程序列表中为 pSortableColumn 和 pSelectableRow 提供了一个新的表实例来满足它们的依赖性。他们有效地选择并排序了一个永远不会渲染的空表。

我通过将表提供程序更改为 useFactory 来修复此问题。我的工厂函数需要我的包装器组件作为依赖项，然后返回它的子涡轮表作为提供的表。因此，现在当 pSortableColumn 和 pSelectableRow 请求表格时，它们会在我的包装器组件中获取正确的表格。

    ...
    import { DomHandler } from 'primeng/api';
    import { Table, TableService } from 'primeng/table';
    import { ObjectUtils } from 'primeng/components/utils/objectutils';
    ...

    export function tableFactory(datalist: DataListComponent) {
      return datalist.datatable;
    }
    
    @Component({
      selector: 'app-data-list',
      templateUrl: './data-list.component.html',
      styleUrls: ['./data-list.component.scss'],
      providers: [ DomHandler, ObjectUtils, TableService, {
        provide: Table,
        useFactory: tableFactory,
        deps: [DataListComponent]
      }],
    })
    export class DataListComponent implements OnInit {
      @ViewChild(('datatable')) datatable: Table;
    ...
    }

我应该提到，如果您使用属性从父组件传递模板，而不是 ContentChildren 和 QueryList，则需要在包装器组件内部定义模板，否则您将再次遇到相同的问题。

例如，将模板作为属性传递给包装器内的模板，如下所示：

    <wrapper-component [headerTemplate]="defaultHeader">
      <ng-template #defaultHeader>
        ...
      </ng-template>
    </wrapper-component>

但是将模板作为属性传递给包装器外部的模板是行不通的：

    <ng-template #defaultHeader>
      ...
    </ng-template>
    <wrapper-component [headerTemplate]="defaultHeader">
    </wrapper-component>

如果您使用 ContentChildren 和 QueryList，那么您显然需要包装器内的模板。