时间戳

首页 > 解决方案 > 渲染列表项时显示无穷大的点

angular - 渲染列表项时显示无穷大的点

问题描述

我正在尝试渲染嵌套列表元素，

下面是JSON结构，

listItems = {
  "text": "root",
  "children": [{
    "text": "Level 1",
    "children": [{
      "text": "Level 2",
      "children": [{
        "text": "Level 3",
        "children": [],
        "type": "unordered-list-item"
      }],
      "type": "unordered-list-item"
    }],
    "type": "unordered-list-item"
  }],
  "type": "unordered-list-item"
}

下面是我的组件 html，

<ul *ngIf="listItems.type === 'unordered-list-item' && listItems.children.length > 0">
  <li *ngFor="let child of listItems.children">
    {{ child.text }}

    <bw-list *ngIf="child.type === 'unordered-list-item'" [listItem]="child"></bw-list>
  </li>
</ul>

如果children发现它需要重复组件并渲染子组件。

组件.ts

export class AppComponent {
  @Input() listItem: any;
  public listItems = {
    "text": "root",
    "children": [{
      "text": "Level 1",
      "children": [{
        "text": "Level 2",
        "children": [{
          "text": "Level 3",
          "children": [],
          "type": "unordered-list-item"
        }],
        "type": "unordered-list-item"
      }],
      "type": "unordered-list-item"
    }],
    "type": "unordered-list-item"
  };
}

问题是它呈现无穷大的点。请帮忙

链接到项目https://stackblitz.com/edit/angular-list-component-1smik4?file=src/app/app.component.ts

标签： angulartypescript

解决方案

我没有得到你的代码。你忘了减少长度数？也许这可以帮助你：

import {Component, Input} from "@angular/core";

@Component({
    selector: 'my-app',
    template: `
    <div>
      Recursive Component
      <my-app [counter]="counter - 1" *ngIf="counter > 0"></my-app>
    </div>
  `
})
export class AppComponent {

    @Input() counter : number = 3;

}

推荐阅读