Angular 9 - Select 中的嵌套和分组选项

如何解决Angular 9 - Select 中的嵌套和分组选项

再次问这个问题，因为它因重复而被关闭，但另一个问题与此无关。

我有一个看起来像这样的“选择元素”数组：

elements = [
{name: 'Root1',id: 1,parent_id: null},{name: 'Child1',id: 2,parent_id: 1},{name: 'Child11',id: 3,parent_id: 2},{name: 'Child211',id: 8,parent_id: 7}
{name: 'Child12',id: 4,parent_id: 2} 
{name: 'Root2',id: 5,{name: 'Child2',id: 6,parent_id: 4},{name: 'Child21',id: 7,parent_id: 5},]

它可以在任何给定时间增大或缩小。我想要一个选择框，只能选择孩子（由

Root1
  Child1
    Child11 <
    Child12 <
Root2
  Child2
    Child21
      Child211 <

我尝试过使用 Ng-Select 的 Groupby，按 parent_id 分组，但效果不佳。

使用以下代码：

<ng-select
  [items]="elements"
  bindLabel="name"
  bindValue="parent_id"
  groupBy="parent_id"
  [(ngModel)]="selectValue"
  >
<ng-template ng-optgroup-tmp let-item="item">
  {{ item.name || item.parent_id }}
</ng-template>
</ng-select>

这些组最终看起来像这样：

Root1
  Child1 <
Child1
  Child11 <
  Child12 <
Root2
  Child2 <
Child2
  Child21 <
Child21
  Child211 <
Root1 <
Root2 <

我将如何以只有没有任何子元素的元素是选项，而其他元素是选项组的方式动态生成这个选择组件？