Html 如何从angular 6中的示例json动态呈现ul li值

我有一个json示例，我需要使用ul li标记创建一个侧栏，值来自json。 {“filter”：{“Category1”：{“value”：[“one”、“two”、“three”]}，“Category2”：{“value”：[“four”、“five”、“six”]}}。我已经在angularjs中完成了，但在angular 6中不起作用。有谁能帮我一下吗，我是angular的新手，下面是代码

app.html

---

您需要更改json格式

items = {"filter":
  [{
    "name":"Category1",
    "value":["one","two","three"]
  },
    {
    "name":"Category2",
    "value":["four","five","six"]
  }
  ]};

HTML

{{item.name}


{{p}

---

上述代码将起作用*ngFor使用的是，您添加的json格式具有map（filter）of map（category）of map（value）格式，其中的值不是用来迭代的

当您尝试在html组件中使用*ngFor时，我建议您使用iterable对象

这就是我的解决方案：

<ul *ngFor="let parent of (items.filter | keyvalue)">
  <li class="parent">{{ parent.key }}</li>
  <ul *ngFor="let child of (parent.value.value | keyvalue)">
    <li class="child">{{ child.value }}</li>
  </ul>
</ul>

{{parent.key}
{{child.value}

首先，我使用了angular（）中的keyvalue管道，之后您可以根据需要迭代json对象，而无需更改它

---

另外，我在这里留下了一个如何工作的例子（）

谢谢你的帮助。。但是无法更改json格式感谢您的帮助，我收到此错误“无法找到管道‘keyvalue’。”我已经更新了angular管道版本，请告诉我如何修复此错误。angular 6.1中提供了keyvalue管道。如果可以，只需更新依赖项即可。为这个错误而后悔，并希望它能起作用。

items = {"filter":
  [{
    "name":"Category1",
    "value":["one","two","three"]
  },
    {
    "name":"Category2",
    "value":["four","five","six"]
  }
  ]};

<ul *ngFor="let item of items.filter">
  <li class="parent"><b>{{item.name}}</b></li>
  <li class="child">
   <ul>
    <li *ngFor="let p of item.value">{{p}}</li>
   </ul>
  </li>
 </ul>

<ul *ngFor="let parent of (items.filter | keyvalue)">
  <li class="parent">{{ parent.key }}</li>
  <ul *ngFor="let child of (parent.value.value | keyvalue)">
    <li class="child">{{ child.value }}</li>
  </ul>
</ul>