我正在尝试使用ngTemplateOutlet在turbo表元素中注入一个头模板,因为它可以在下面的代码片段中看到：
<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 example
由于在ngTemplateOutlet中使用模板头是我的用例的要求,我想请指出我在这里做错了什么？
谢谢 ！
解决方法
我知道这是一个老问题,但我有同样的问题,在任何地方找不到任何有用的东西.
我想通过,如果我将’Table’类添加到我的包装器组件的提供者中,那么错误就会消失.但是我还需要DomHandler,ObjectUtils和TableService的提供程序.
这使得错误消失,并允许将模板传递到包装器并向下传递到p表.但是,pSortableColumn和pSelectableRow现在只能在包装器组件内的默认模板内工作.
没有错误,因为将Table类放入我的包装器的提供者列表中,为pSortableColumn和pSelectableRow提供了一个新的表实例来满足它们的依赖性.他们有效地选择和排序一个永远不会被渲染的空表.
我通过将Table提供程序更改为useFactory来修复此问题.我的工厂函数需要我的包装器组件作为依赖项,然后返回它的子turbo表作为提供的表.所以现在当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从父组件传递模板,则需要在包装器组件的INSIDE中定义模板,否则您将再次遇到相同的问题.
例如,将模板作为属性传递给包装器中的模板,如下所示：
<wrapper-component [headerTemplate]="defaultHeader">
<ng-template #defaultHeader>
...
</ng-template>
</wrapper-component>
但是将模板作为属性传递给包装器外部的模板,如下所示：
<ng-template #defaultHeader> ... </ng-template> <wrapper-component [headerTemplate]="defaultHeader"> </wrapper-component>
如果您使用的是ContentChildren和QueryList,那么您显然需要包装器中的模板.
