PrimeNG 6.0.0-rc1 TreeTable 无法扩展行答案

【问题标题】：PrimeNG 6.0.0-rc1 TreeTable cannot expand rowsPrimeNG 6.0.0-rc1 TreeTable 无法扩展行
【发布时间】：2018-08-19 01:32:57
【问题描述】：

我和PrimeNG forum post有同样的问题。

基本上 TreeTable 组件可以正确读取树，但

<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>

不支持展开行的箭头

'p-treeTableToggler' 不是已知元素：

如果“p-treeTableToggler”是一个 Angular 组件，则验证它是该模块的一部分。

如果“p-treeTableToggler”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

我真的很困惑它在 PrimeNG 展示中的工作方式，但对我和在 PrimeNG 论坛上发帖的几个人来说却不是。

【问题讨论】：

您是否在主 ts 文件中包含了 treeTableToggler 模块？

标签： icons primeng primeng-treetable

【解决方案1】：

从Treetable source code 可以看出，他们正在使用 primeicons，例如 pi pi-fw pi-chevron-down：

@Component({
    selector: 'p-treeTableToggler',
    template: `
        <a href="#" class="ui-treetable-toggler" *ngIf="rowNode.node.leaf === false || rowNode.level !== 0 || rowNode.node.children && rowNode.node.children.length" (click)="onClick($event)" [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'">
            <i [ngClass]="rowNode.node.expanded ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'"></i>
        </a>
    `
})

【讨论】：

【解决方案2】：

如果您使用的是最新的 primeNg，请确保您还加载了 primeicons 和 css 样式。没有这个，我就没有得到数据的树结构。和 treetable 组件一样，如果不导入 primeicons，> chevron-right 将不会显示。

 yarn add primeicons or npm install primeicons –save

并修改vendor.scss：

add @import "~primeicons/primeicons.css";

【讨论】：