PrimeNG p-tree 过滤器问题答案

【问题标题】：PrimeNG p-tree filter IssuePrimeNG p-tree 过滤器问题
【发布时间】：2021-08-13 17:01:46
【问题描述】：

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

在 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"}]
            }]
    }
];

当我尝试在搜索过滤器树中搜索 “费用” 时，应该会打开并显示不工作的结果。
当前结果。
预期结果。
即使我尝试了宽松过滤模式和严格过滤模式也没有结果。

请帮帮我，谢谢

【问题讨论】：

你的primeng版本是多少？

标签： angular typescript primeng

【解决方案1】：

我认为这是 PrimeNG 版本的问题。

在 7.1.3 版本中，它没有扩展

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

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

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

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

【讨论】：

嗨 Binara Thambugala 感谢您的回复，我只想在第一次搜索时折叠它应该打开的过滤器
你的primeng版本是多少？给我看看你的package.json文件
嗨@santhosh，如果这个或任何答案解决了您的问题，请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

【解决方案2】：

实际上，我也面临同样的问题，我观察到我的 json 没有密钥。添加后，就成功了。

【讨论】：

【解决方案3】：

我尝试了各种方法来复制这个问题。但无法找到此代码的任何问题。

我使用的是 Primeng 版本 7。

我修正了你的 json 中的错字"lakeybel": "Scarface"，它应该是"key": "Scarface"。即使有错字，它也能正常工作。

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

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

【讨论】：

感谢您的回复。是的，我将拼写错误“lakeybel”更改为“key”并使用了文档事件中给出的 p-tree，我在控制台中没有看到任何错误，但这仍然无法按预期工作。

【解决方案4】：

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

【讨论】：