PrimennGTreeTable 图标不可见

Posted 2023-03-13

【中文标题】PrimennGTreeTable 图标不可见

【英文标题】：PrimennGTreeTable Icon not visible

【发布时间】：2018-12-03 15:12:15

【问题描述】：

我正在使用 PrimeNG TreeTable，但在我下面的代码中，展开/折叠图标不可见， https://www.primefaces.org/primeng/#/treetable

不知道是不是rowNode的问题，

我只获取父数据，子数据不可见，因为折叠/展开图标不可见

 <p-treeTable [value]="files2">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Type</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-expanded="expanded" >
        <tr>
            <td (click)="toggle()" >
                 <p-treeTableToggler [rowNode]="rowNode" ></p-treeTableToggler> 
                rowData.name
            </td>
            <td>rowData.size</td>
            <td>rowData.type</td>
        </tr>            
    </ng-template>
</p-treeTable>

ts 文件

     this.files2=[  
          
            "data":  
                "name":"Applications",
                "size":"200mb",
                "type":"Folder"
            ,
            "children":[  
                  
                    "data":  
                        "name":"Angular",
                        "size":"25mb",
                        "type":"Folder"
                    ,
                    "children":[  
                          
                            "data":  
                                "name":"angular.app",
                                "size":"10mb",
                                "type":"Application"
                            
                        ,
                          
                            "data":  
                                "name":"cli.app",
                                "size":"10mb",
                                "type":"Application"
                            
                        ,
                          
                            "data":  
                                "name":"mobile.app",
                                "size":"5mb",
                                "type":"Application"
                            
                        
                    ]
                ,
                  
                    "data":  
                        "name":"editor.app",
                        "size":"25mb",
                        "type":"Application"
                    
                ,
                  
                    "data":  
                        "name":"settings.app",
                        "size":"50mb",
                        "type":"Application"
                    
                
            ]
        
]

这里我只得到父值，我没有得到子值

【问题讨论】：

"primeicons": "^1.0.0-beta.10", "primeng": "^6.1.4"，我有这些，我反复检查了我的配置，整个东西都是一个新项目，并且没有显示切换器。

我发现了问题所在。似乎如果没有 children 属性，则不会显示切换器。到目前为止，我还没有检查过源代码。

【参考方案1】：

在treetable primeng中使用了primeicons所以你需要在使用前安装它

npm install primeicons --save

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />

有关更多信息，您可以在此处参考启动指南 -

https://www.primefaces.org/primeng/#/setup

【讨论】：

但是在primeng 6.0.0版本中，所有图标都不起作用

他们必须更改一些配置，请阅读文档

Primeng 家伙已将 fa 图标更新为 fa fa 图标，但是无论我有内置类作为 fa，如何将其更改为 fa fa

它适用于我的 6.0.0，我使用 angular CLI 对其进行了配置。