如何在primeng自动完成角度8中对建议嵌套列表进行分组

我正在尝试对自动完成建议进行分组，并希望在 primeng 中呈现它们。

我们如何在primeng中添加自定义模板？

my data

data = [{"id":"m1","name":"menu1","val":"D","items":[{"id":"d1","name":"datanested1","val":"D","items":[{"id":"1","name":"direct Data","val":"E"},{"id":"2","name":"test","val":"E"}]}]},{"id":"d2","name":"menu2","val":"D","items":[{"id":"21","name":"test21","val":"E"},{"id":"22","name":"test23","val":"E"}]},{"id":"d3","name":"menu3","val":"D","items":[{"id":"31","name":"test data 3","val":"E"},{"id":"32","name":"test data 4","val":"E"}]}]

Angular 8 中是否有其他库支持此功能？

当用户开始在自动完成中搜索时，我想实现这样的目标......

Menu1 - header
 datanested1 -subheader
  direct Data -values
   test        -values

Menu2 - header
 test21-values
 test23-values

Menu3 - header
 test data 3-values
 test data 4-values


1. if the user types "direct" in the input box...

Menu1 - header
 datanested1 -subheader
  direct Data -values

2. if the user types "data" in the input box...

Menu3 - header
 test data 3-values
 test data 4-values

3. if the user types "menu" in the input box...
Menu1 - header
 datanested1 -subheader
  direct Data -values
  test        -values

Menu2 - header
 test21-values
 test23-values

Menu3 - header
 test data 3-values
 test data 4-values

我在 stackblitz 中尝试了以下示例。

https://stackblitz.com/edit/primeng-7-1-2-qtsnpm https://stackblitz.com/edit/primeng-7-1-2-qtsnpm

在下面的方法中，我们将数组简化为简单的结构

[
  {
    "id": "m1",
    "name": "menu1",
    "val": "D",
    "search": ["m1", "d1", "1", "2", "menu1", "datanested1", "direct Data", "test"],
    "depth": 2
  },
  {
    "id": "d1",
    "name": "datanested1",
    "val": "D",
    "search": ["d1", "1", "2", "datanested1", "direct Data", "test"],
    "depth": 1
  },
  {
    "id": "1",
    "name": "direct Data",
    "val": "E",
    "search": ["1", "direct Data"
    ],
    "depth": 0
  },
 ...

]

想法是这样的，我们将使用depth格式化文本，同时search用于搜索。

  maxDepth = 0;
  reducedArray = (arr, depth = 0, parentSearch = []) => {
    this.maxDepth = Math.max(this.maxDepth, depth);
    if (!arr) {
      return [];
    }

    return arr.reduce((prev, { items, ...otherProps }) => {
      // const depth = this.findDepth({ items, ...otherProps });
      const search = [
        ...this.getProps({ items, ...otherProps }, "id"),
        ...this.getProps({ items, ...otherProps }, "name")
      ];
      const newParentSearch = [...parentSearch, otherProps.name, otherProps.id];
      return [
        ...prev,
        { ...otherProps, search, depth, parentSearch },
        ...this.reducedArray(items, depth + 1, newParentSearch)
      ];
    }, []);
  };

  getProps = (item, prop) => {
    if (!item.items) {
      return [item[prop]];
    } else {
      return [
        item[prop],
        ...item.items.map(x => this.getProps(x, prop))
      ].flat();
    }
  };

我们可以应用如下所示的样式

  getStyle(depth) {
    return {
      color: depth === 0 ? "darkblue" : depth === 1 ? "green" : "black",
      paddingLeft: depth * 7 + "px",
      fontWeight: 800 - depth * 200
    };
  }

我将使用响应式编程，因此我将使用以下方法将对象转换为 Observableof操作员

  data$ = of(this.reducedArray(this.data));
  filteredData$ = combineLatest([this.data$, this.filterString$]).pipe(
    map(([data, filterString]) =>
      data.filter(
        ({ search, parentSearch }) =>
          !![...search, ...parentSearch].find(x => x.includes(filterString))
      )
    )
  );

现在我们已经完成了，剩下的就是更新html了

<p-autoComplete [(ngModel)]="cdsidvalue" [suggestions]="filteredData$ | async"
  (completeMethod)="filterString$.next($event.query)" field="name" [size]="16" placeholder="Menu" [minLength]="1">
  <ng-template let-menu pTemplate="item">
    <span 
      [ngStyle]="getStyle(menu.depth)" >{{ menu.name }}</span>
  </ng-template>

</p-autoComplete>

演示在这里 https://stackblitz.com/edit/primeng-7-1-2-pofce9?file=src%2Fapp%2Fapp.component.ts

Update

由于我们使用反应式编程，重构以接受 http 请求非常容易，只需用 http 请求替换 observable

data$ = this.http.get<any[]>("my/api/url");
  filteredData$ = combineLatest([this.data$, this.filterString$]).pipe(
    map(([data, filterString]) =>
      this.reducedArray(data).filter(
        ({ search, parentSearch }) =>
          !![...search, ...parentSearch].find(x => x.includes(filterString))
      )
    )
  );

查看此更新的实际效果 https://stackblitz.com/edit/primeng-7-1-2-y9ggte?file=src%2Fapp%2Fapp.component.ts

我还更新了 html 以添加加载消息，我们不想显示没有数据的表单