angular – 排序时PrimeNG turbo表模板错误
我正在尝试使用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,那么您显然需要包装器中的模板. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |