PrimeNG p-tree 过滤器问题

Question

没有显示子节点，我们必须手动打开树才能看到过滤后的结果。

在 html 文件中：

<p-tree [value]="filesTree2" filter="true" selectionMode="single" filterMode="strict"></p-tree>

在component.ts中：

filesTree2: TreeNode[] =
[
    {
        "label": "Documents",
        "key": "Documents",
        "data": "Documents Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [{
                "label": "Work",
                "key": "Work",
                "data": "Work Folder",
                "expandedIcon": "fa fa-folder-open",
                "collapsedIcon": "fa fa-folder",
                "children": [{"label": "Expenses.doc", "key": "Expenses.doc", "icon": "fa fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "key": "Resume.doc", "icon": "fa fa-file-word-o", "data": "Resume Document"}]
            },
            {
                "label": "Home",
                "key": "Home",
                "data": "Home Folder",
                "expandedIcon": "fa fa-folder-open",
                "collapsedIcon": "fa fa-folder",
                "children": [{"label": "Invoices.txt", "key": "Invoices.txt", "icon": "fa fa-file-word-o", "data": "Invoices for this month"}]
            }]
    },
    {
        "label": "Pictures",
        "key": "Pictures",
        "data": "Pictures Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [
            {"label": "barcelona.jpg", "key": "barcelona.jpg", "icon": "fa fa-file-image-o", "data": "Barcelona Photo"},
            {"label": "logo.jpg", "key": "logo.jpg", "icon": "fa fa-file-image-o", "data": "PrimeFaces Logo"},
            {"label": "primeui.png", "key": "primeui.png", "icon": "fa fa-file-image-o", "data": "PrimeUI Logo"}]
    },
    {
        "label": "Movies",
        "key": "Movies",
        "data": "Movies Folder",
        "expandedIcon": "fa fa-folder-open",
        "collapsedIcon": "fa fa-folder",
        "children": [{
                "label": "Al Pacino",
                "key": "Al Pacino",
                "data": "Pacino Movies",
                "children": [{"label": "Scarface", "key": "Scarface", "icon": "fa fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "key": "Serpico", "icon": "fa fa-file-video-o", "data": "Serpico Movie"}]
            },
            {
                "label": "Robert De Niro",
                "key": "Robert De Niro",
                "data": "De Niro Movies",
                "children": [{"label": "Goodfellas", "key": "Goodfellas", "icon": "fa fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "key": "Untouchables", "icon": "fa fa-file-video-o", "data": "Untouchables Movie"}]
            }]
    }
];

当我尝试在搜索过滤器树中搜索 "Expenses" 时，应该会打开并显示无效的结果。
呈现结果。
预期结果。
即使我尝试了 Lenient Filter Mode 和 Strict Filter Mode 也没有结果。

请帮帮我，谢谢

Answer 1

我一直在尝试重现这个问题。但找不到此代码的任何问题。

我正在使用 Primeng 版本 7。

我更正了您 json "lakeybel": "Scarface" 中的拼写错误，应该是 "key": "Scarface"。即使有错字，它也能正常工作。

只需使用正确的 JSON 重试并使用文档中给出的 <p-tree> <p-tree [value]="filesTree2" [filter]="true" [filterMode]="strict"></p-tree>.

同时检查您是否看到任何控制台错误或警告。

Answer 2

我认为这是 PrimeNG 版本问题。

在7.1.3版本中，不展开

在8.1.1版本（最新稳定版）中，正在扩展

检查您的 package.json 文件并更新 primeng 依赖项。

"dependencies": {
  //...
  "primeng": "^8.1.1",
  "primeicons": "^2.0.0"
},

更多详情：

https://www.primefaces.org/primeng-7.1.3/#/tree

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

Answer 3

实际上，我也遇到了同样的问题，我发现我的 json 没有钥匙。添加后成功了

Answer 4

您必须为树中的每个项目添加一个键使用 primeng 11.3.0 检查此解决方案 stackblitz

PrimeNG p-tree 过滤器问题

PrimeNG p-tree filter Issue

typescript

primeng

angular