在 primeng 中将样式应用于 p-tree 的特定 children 节点

Question

我正在使用 primeng 创建一个使用 p-tree 的民意调查和答案类型的结构。所以我有一个等级制度：

参与者 --> 投票 --> 问题 --> 答案

每个问题都有答案选项。节点列表和childrens的数组如下：

"label": "Bollywood",
    "children": [   
     {
        "label": "Do you prefer hollywood? [single]",
        "children": [
          {
            "label": "Yes",
            "selected": false
          },
          {
            "label": "No",
            "selected": true
          }
         ]
       }
     ]

我已经为每个 children 的答案选项添加了选定的值，因此对于真实值，我们可以应用 css 来区分其他选项。

当前场景的屏幕截图如下：

我只想突出显示答案中所选值正确的选项。纯粹从 primeng p-tree 控件的前景来看，我很想知道我们如何为树节点提供样式。请帮助我，如果你能完成上面提到的 stackblitz 示例，将不胜感激。谢谢。

Answer 1

您可以在 p-tree 中使用 type of node 来实现此目的，请完成 documentation of Tree Templating。但首先你需要修改你的 tree-account.json 文件或做一些映射以在你的 json 中添加 type。添加一个 Stackblitz 相同。这里我把选中项的字体颜色改成了绿色。

在 primeng 中将样式应用于 p-tree 的特定 children 节点

Apply style to particular children nodes of p-tree, in primeng

javascript

css

typescript

primeng

angular