无法在 Angular 中渲染树状结构？答案

【问题标题】：Unable to render tree like structure in Angular?无法在 Angular 中渲染树状结构？
【发布时间】：2019-01-01 01:03:56
【问题描述】：

您好，我正在使用 Angular 5 开发 Web 应用程序。我正在尝试显示树状结构。我正在关注

https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/async/async.component.ts 和 https://angular2-tree.readme.io/docs/async-data-1

在上面的示例中，他们提供了一些数据，我的应用程序可以使用它。我正在实时使用其他一些数据并将其转换为他们给出的示例中的格式。

下面是我的例子。

 let results =  JSON.parse('{"userid":"e75792f8-cfea-460e-aca2-07a778c92a7c","tenantid":"00000000-0000-0000-0000-000000000000","username":"karthik","emailaddress":"john@krsars.onmicrosoft.com","isallowed":false,"userroles":[{"userroleid":"b81e63d1-09da-4aa0-af69-0f086ddb20b4","userid":"e75792f8-cfea-460e-aca2-07a778c92a7c","roleid":"85d2f668-f523-4b64-b177-b1a78db74234","tenantappid":1,"validfrom":"2018-01-24T00:00:00","validto":"2018-01-24T00:00:00","isactive":true}]}');
    for (const key in results) {
      if (results[key] instanceof Array) {
        const containerTyp2 = {name: '', hasChildren: false,};

        containerTyp2.name = key;
        containerTyp2.hasChildren = true;

        this.nodes.push(containerTyp2);
     } else {
        const object = {name: ''};
        const containerTyp1 = {name: '', children: []};
        object.name = results[key];
        containerTyp1.name = key;
        containerTyp1.children.push(object);
        this.nodes.push(containerTyp1);
    }
  }
  console.log(this.nodes);

以下是应用示例中的示例数据。

  this.nodes = [
      {
        name: 'root1',
        children: [
          { name: 'child1' }
        ]
      },
      {
        name: 'root2',
        hasChildren: true
      },
      {
        name: 'root3'
      }
    ];

我正在将我的原始数据转换为与上述示例相同的格式。当我在控制台中显示这两个数据时，除了 id 字段外，两者看起来都相似。每当我显示示例数据时，我都可以看到 id 字段添加了随机值，但明确地它们没有添加。下面是示例数据的控制台。

下面是原始数据的控制台。

有人可以帮我解决这个问题吗？我无法确定不显示原始数据的原因。任何帮助，将不胜感激。谢谢。

【问题讨论】：

您在哪里显示这些数据以及显示什么？控制台有错误吗？
我在 html 页面中显示这些数据。我在显示示例数据的同一位置显示数据。没有错误。什么都没有显示。当我为循环 id 字段在最后一个数组中可见但在前一个数组中不存在时
在您实际显示数据的位置显示代码。我从您的代码中得到了预期的结果：stackblitz.com/edit/angular-esh2hc
如果你点击'Log data'按钮，你可以看到id被添加了。另一个问题是为什么您实际上要对并非真正树结构的数据使用树视图。
嗨，约翰。我已经看到了你创建的 stackblitz。对我来说似乎很有趣。

标签： javascript html typescript treeview angular5

【解决方案1】：

我通过在 for 循环末尾添加以下行来解决此问题。

 let results=data;
    for (const key in results) {
      if (results[key] instanceof Array) {
        const containerTyp2 = {name: '', hasChildren: false,};

        containerTyp2.name = key;
        containerTyp2.hasChildren = true;

        this.nodes.push(containerTyp2);
     } else {
        const object = {name: ''};

        const containerTyp1 = {name: '', children: []};
        object.name = results[key];
        containerTyp1.name = key;
        containerTyp1.children.push(object);
        this.nodes.push(containerTyp1);
    }
    this.tree.treeModel.update();

【讨论】：