PrimennGTreeTable图标不可见

时间:2018-06-25 05:26:58

标签: angular html5 typescript angular5 primeng

我正在使用PrimeNG TreeTable,但是在下面的代码中,expand / collapse Icon不可见, 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"
                    }
                }
            ]
        }
]

这里我只获得父母价值观,我没有得到孩子价值观

1 个答案:

答案 0 :(得分:1)

在treetable中,primng使用了primeicons,因此您需要在使用前安装

npm install primeicons --save

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

有关更多信息,请参见此处的启动指南-