Angular2迭代ngFor JSON文件答案

【问题标题】：Angular2 Iterating ngFor JSON-FileAngular2迭代ngFor JSON文件
【发布时间】：2016-10-27 09:06:56
【问题描述】：

我对 Angular2 还很陌生，我想读出一个 json 文件。它工作正常，我从 REST 客户端获取文件，我可以将文件保存在组件的局部变量中。现在我正在尝试使用 ngFor 读取属性（数组），但这不起作用。这是html：

<div *ngFor="let categories of tasks.tasks">
    {{categories}} --> Display name of categorie (epg, recs)
    <p *ngFor="let task of categories">{{task.text}}</p>
</div>

还有 JSON 文件：

{
    "tasks": {
        "epg": [{
            "text": "\\\\...\\Daten\\Videos\\Aufnahmen"
        }, {
            "text": "C:\\Users\\...\\Desktop"
        }],
        "recs": [{
            "text": "\\\\...\\Daten\\Videos\\Aufnahmen"
        }, {
            "text": "C:\\...\\Junias\\Desktop"
        }]
    }
}

希望有人可以帮助我；）

【问题讨论】：

“不工作”是什么意思？它有什么表现吗？它什么都没有显示？
子树tasks不是一个数组，所以你不能用ngFor循环遍历它。
stackoverflow.com/questions/31490713/…
感谢您的评论，我将子树任务更改为一个数组；）但仍然存在如何循环遍历两个数组的问题...这里有 [object Object] 而不是“epg ”或“推荐”。问题是，我怎样才能获得“类别”的值（名称）？以及如何循环遍历两个 JSON 数组 ;)

标签： arrays json angular ngfor

【解决方案1】：

考虑

z={
"tasks": {
    "epg": [{
        "text": "\\\\...\\Daten\\Videos\\Aufnahmen"
    }, {
        "text": "C:\\Users\\...\\Desktop"
    }],
    "recs": [{
        "text": "\\\\...\\Daten\\Videos\\Aufnahmen"
    }, {
        "text": "C:\\...\\Junias\\Desktop"
    }]
}

将您的 JSON 修改为

  let a=this.z.tasks;
  this.z = Object.keys(a).map(function(k) { return a[k] });

这是plunker

【讨论】：

非常感谢！但这是一个问题，因为任务（epg，recs，...）可能是 N 个任务（epg，recs，计时器，系统，...）。所以我想到了一个“双重”ngFor......你也有这个解决方案吗？谢谢;)
这看起来相当不错。 ;) 但是在这个解决方案中还有一件事是不可能的（我认为是这样的......）：我想显示数组的“键”，所以输出应该是：epg \\\\ ...\\Daten\\Videos\\Aufnahmen C:\\Users\\...\\桌面记录 \\\\...\\Daten\\Videos\\Aufnahmen C:\\Users\\. ..\\Desktop 你明白我的意思吗？没关系，如果应该编辑 json 或 html ;) 非常感谢！