1

我有一个使用管道的递归角度模板。我的问题是它最多只能显示 2 级。

管道转换器

在这里，递归过滤数据以通过 parentid 找到所有孩子

@Pipe({ name: 'converter' })
export class ConverterPipe implements PipeTransform {
  transform(array: any[], parentId: string = "0"): any[] {
    return this.filterNodes(array, parentId);
  }
  filterNodes(array: any[], parentId: string): any[] {
    return array.filter((node) => { 
      return node.parent === parentId; 
    }).map((node) => {
      console.log("parentid > " + parentId)
      console.log(node)
      node["items"] = this.filterNodes(array, node.id); 
      return node;
    });
  }
}

HTML

递归模板

  <ul>
    <li *ngFor="let item of mainmenu" >
      <a href="#" >{{ item.id }} {{ item.name }}</a>
      <ng-container *ngTemplateOutlet="List; context:{ $implicit: submenu , parentid: item.id, submenuclass:1 }"></ng-container>
    </li>
  </ul>
<ng-template #List let-items let-parentid="parentid", let-submenuclass="submenuclass">
    <ul>
        <li *ngFor="let item of items | converter: parentid">
          <a href="#">{{ item.id }} {{ item.name }} {{ parentid }}</a>
          <ng-container *ngTemplateOutlet="List; context:{ $implicit: submenu, parentid:item.id, submenclass:0}"></ng-container>
        </li>
    </ul>
</ng-template>

打字稿

包含将主菜单与子菜单分开的数据和 2 个变量

  menu = [
    {
      "id": "32",
      "name": "System Admin",
      "parent": "0",
    },    {
      "id": "33",
      "name": "User Maintenance",
      "parent": "32",
    },
    {
      "id": "35",
      "name": "Back Office Users",
      "parent": "33",
    },
    {
      "id": "37",
      "name": "Portal Users",
      "parent": "33",
    },
    {
      "id": "36",
      "name": "Site Maintenance",
      "parent": "32",
    },
    {
      "id": "38",
      "name": "Sample",
      "parent": "35",
    },
    {
      "id": "39",
      "name": "Sample2",
      "parent": "35",
    }
  ];
  mainmenu;
  submenu;
  constructor() { }

  ngOnInit() {
    this.mainmenu = this.menu.filter( item => item.parent =="0")
    this.submenu = this.menu.filter( item => item.parent !="0")
  }

当我运行应用程序时，最后两个数据“Sample”和“Sample2”未显示在“Back Office Users”下。

4

1 回答 1

1

我已经解决了这个问题，我应该将子菜单数组变量放在递归模板参数下，而不是 item 下的项目。我还将第三个参数更改为子菜单类，因为它与变量冲突。请看我的编辑。

于 2020-01-09T05:10:18.663 回答