Question

大家好我正在使用角度递归模板进行数组的递归表示。

其代码如下所示我一直在关注

https://plnkr.co/edit/CIGAA5BmiKU4hCMsOaIB?p=preview此链接。

我的数组基本上是动态的

<ul>
        <ng-template #recursiveList let-list>
            <li *ngFor="let item of AlldepartmentList; let index = index">
                <span (click)="getDepartment(item.id)"> {{item.department_name}} </span>

            <ul *ngIf="item.children.length > 0">
                <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>

            </ul>
        </li>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

这是我传递给html视图的对象。

[{
"id": 3,
"department_name": "new",
"children": [{
    "id": 4,
    "department_name": "new",
    "children": []
}, {
    "id": 5,
    "department_name": "new2",
    "children": []
}, {
    "id": 7,
    "department_name": "new2123",
    "children": []
}, {
    "id": 8,
    "department_name": "new21",
    "children": []
}, {
    "id": 11,
    "department_name": "test",
    "children": []
}]
},
  {
  "id": 6,
   "department_name": "new2",
  "children": []
   }, {
   "id": 2,
   "department_name": "test",
   "children": []
   }]

我的依赖版本在这里

Angular CLI: 1.5.5
Node: 7.10.1
OS: linux x64
Angular: 5.2.2
animations, common, compiler, compiler-cli, core, forms
http, language-service, platform-browser
platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.8.1

我收到此错误。大多数针对此错误的解决方案都没有任何完美的逻辑基础。

如果某个地方我错了或者只是版本问题，请纠正我。

VM42212 CostcentersComponent.ngfactory.js:573 ERROR RangeError: Maximum call stack size exceeded
   at Object.debugUpdateDirectives [as updateDirectives] (VM41902 core.js:14852)
at checkAndUpdateView (VM41902 core.js:13999)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)
at checkAndUpdateView (VM41902 core.js:14000)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)
at checkAndUpdateView (VM41902 core.js:14000)
at callViewAction (VM41902 core.js:14350)
at execEmbeddedViewsAction (VM41902 core.js:14308)

Answer 1

您的问题是您在ng-template中迭代AllDepartmentList而不是局部变量list。

您必须从以下位置更改ngForOf指令：

*ngFor="let item of AlldepartmentList; let index = index"

到：

*ngFor="let item of list; let index = index"

以下是您的代码的固定版本：stackblitz

angular 5递归模板ERROR RangeError：超出最大调用堆栈大小

1 个答案: