Angular 递归模板超过调用堆栈的树

使用，我可以毫无问题地显示树

我想以不同的方式对待第一个关卡，并将其显示为：

我尝试了一些不同的变体，但我一直在超越调用堆栈，例如：

<h1>Angular 2 Recursive List</h1>
<ul>

    <li *ngFor="let item of list">
      {{item.title}} - LEVEL 0
      <ul *ngIf="item.children.length > 0">

        <ng-template #recursiveList let-list>
          <li *ngFor="let child of item.children">
            {{child.title}}
            <ul *ngIf="child.children.length > 0">
              <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: child.children }"></ng-container>
            </ul>
          </li>
        </ng-template>
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: child }"></ng-container>


      </ul>
    </li>
</ul>

---

我决定把事情简化一点

我创建了一个单独的

列表项

组件，以便轻松发现错误

list-item.component.ts list-item.component.html

{{title}}

.
否决投票的原因？
preview-d2335ca5bdb955611c1cb.js:1 ERROR RangeError: Maximum call stack size exceeded
    at NgForOf.ngDoCheck (ng_for_of.ts:212)
    at checkAndUpdateDirectiveInline (provider.ts:215)
    at checkAndUpdateNodeInline (view.ts:429)
    at checkAndUpdateNode (view.ts:389)
    at debugCheckAndUpdateNode (services.ts:431)
    at debugCheckDirectivesFn (services.ts:392)
    at Object.eval [as updateDirectives] (AppComponent.html:9)
    at Object.debugUpdateDirectives [as updateDirectives] (services.ts:386)
    at checkAndUpdateView (view.ts:359)
    at callViewAction (view.ts:615)

  @Input() title: string;
  @Input() children: any[];
  @Input('index') nestingLayer = 0;