为 Angular 创建 mat-tree 和一些麻烦

如何解决为 Angular 创建 mat-tree 和一些麻烦

关于如何使用数据库中的数据为项目创建树元素，我需要您的帮助或建议。我有同一张桌子可以转换成一棵树。

在图片上，输入 0 的字段 CounterpartyGroupParentId 指向并且它是树的根。然后从过滤器方法的下一个字段中，我采用 CounterpartyGroupName 和 CounterpartyGroupId，可以看到它是 10,11。当我们通过过滤器获得 Id 10,11 时，我会选择下一个 CounterpartyGroupParentId，其中 10,11 也存在。下一步是在 CounterpartyGroupId 中查找元素，其中 13,15 与 item4,item6 相应。它是树的第二层。对于第三层，我正在寻找具有相同 id 13 和 15 的 CounterpartyGroupParentId 并接收 item5、item8 为 13 和 Item3 为 15。下一个结构必须在 DOM 中完成树：

。

我试图在项目中实现它。

rootarray: any[] = [];
treview_array(arr): CounterpartyGroupTree[] {
    var secondroot = [],roots = [];
    roots = arr.filter((x) => x.counterpartyGroupParentId == 0);
    roots.forEach((val) => {
      this.rootarray.push({
        name: val["counterpartyGroupName"],id: val["counterpartyGroupId"],children: [],});
    },this);

    for (let i = 0; i < this.rootarray.length; i++) {
      secondroot.push(
        arr.filter(
          (x) => x.counterpartyGroupParentId == this.rootarray[i]["id"]
        )
      );
    }
    let filteredarray = [...secondroot[0],...secondroot[1]];

    filteredarray.forEach((val,index) => {
      this.rootarray[index]["children"].push({
        name: val["counterpartyGroupName"],this);
    var thirdroot = [];

    for (let k = 0; k < this.rootarray.length; k++) {
      for (let l = 0; l < this.rootarray[k]["children"].length; l++) {
        if (this.rootarray[l]["children"] != 0) {
          thirdroot.push(
            arr.filter(
              (x) =>
                x.counterpartyGroupParentId ==
                this.rootarray[l]["children"][l]["id"]
            )
          );
        }
      }
    }
    var filteredroot = [...thirdroot[0],...thirdroot[1]];

    filteredroot.forEach((val,index) => {
      if (
        val["CounterpartyGroupParentId"] ==
        filteredarray["counterpartyGroupId"]
      ) {
        this.rootarray[index]["children"][0]["children"].push({
          name: val["counterpartyGroupName"],});
      } else {
        this.rootarray[index]["children"][0]["children"].push({
          name: val["counterpartyGroupName"],});
      }
    });

   console.log(this.rootarray);

    return this.rootarray;
  }

和界面

export interface CounterpartyGroupTree{
 name:string;
 id: number;
 children?:CounterpartyGroupTree[];

}

在第三层，我很难在树中插入选定的数据。