PrimeNG：单击 p-dropdown 的 li 元素答案

【问题标题】：PrimeNG: Click on a li element of p-dropdownPrimeNG：单击 p-dropdown 的 li 元素
【发布时间】：2021-01-07 08:45:54
【问题描述】：

我在我的项目中使用来自 PrimeNG 库 (https://www.primefaces.org/primeng/v8.2.7-lts/#/dropdown) 的 p 下拉菜单。好吧，我想做的是对下拉列表的元素进行分组，并且我已经实现了。我的问题是，是否可以选择以粗体显示的元素（在图片中，例如德国或美国）？现在，如果我选择它，它不会在下拉列表中显示为选中状态。有什么办法吗？

另一种选择是找到某种方法来列出您在第二张图片中看到的元素，但使用 PrimeNG 下拉元素。

版本角：8.2.14
PrimeNG 版本：8.1.1

【问题讨论】：

请详细说明，您想通过选择组元素来实现什么？您的下拉列表声明“选择汽车”。像“德国”这样的团体显然不是汽车。也许有另一种方法可以实现您的目标。
在我看来，您根本不想要一个组选择，而是一个标准的下拉列表，但显示了父项和子项。我想你可以通过动态分配子类（处理缩进等）来实现这一点。这样所有项目都可以选择。是这个意思吗？
嗯，好吧。你说的对。我明白。我想要实现的是我的下拉列表的元素就像第二张图片（索引）一样，您可以选择其中任何一个，但我不能使用替代库。你有什么主意吗？ @MoxxiManagarm
是的，这就是我想要的。你有如何做到这一点的任何例子吗？ @DarrenStreet
你可以使用内联表达式，比如 NgClass，但是你需要遍历你的数组来建立父子关系。

标签： angular typescript dropdown primeng

【解决方案1】：

我认为最好的方法是使用项目模板并创建一种方法来根据索引值将缩进附加到项目（例如管道（后计算）、扩展 SelectItem（预计算）...）。不要保留组。

我的意思与此类似：

<p-dropdown [options]="myOptions">
    <ng-template let-option pTemplate="item"> 
        {{ option.label | addIndentSpaces }}
    </ng-template>
</p-dropdown>

请参阅文档中的模板部分“自定义内容”。

【讨论】：

这会起作用 ? 但我认为他可以解决这个问题，但只要在她得到回复时更新标签，因为它只是一个前缀 ?