Question

我有一个示例json，我需要使用ul li标签创建一个侧边栏，并且值来自json。我的json结构是这样的。 {“ filter”：{“ Category1”：{“ value”：[“一个”，“两个”，“三个”]}，“ Category2”：{“ value”：[“四个”，“五个”，“六个“]}}}。我已经在http://plnkr.co/edit/D8M1U81tVz3UuzjWathk?p=preview的angularjs中完成了操作，但这在angular 6中不起作用。任何人都可以帮助我，我是angular的新手，这是下面的代码

app.html

<ul *ngFor="(x, y) of items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li *ngFor="p of y.value">{{p}}</li>
</ul>
</li>
</ul>

app.ts

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

Answer 1

当您尝试在html组件中使用* ngFor时，建议您使用可迭代对象。

所以，这就是我的解决方案：

<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>

首先，我使用了angular（https://angular.io/api/common/KeyValuePipe）的键值管道，之后就可以根据需要迭代json对象而无需更改它。

此外，在这里我将举例说明其工作原理（https://stackblitz.com/edit/angular-gqaaet）

Answer 2

您需要更改json格式。

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

HTML

<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>

上面的代码将起作用。 * ngFor与iteration protocols一起使用，您添加的json格式具有map（值）格式的map（类别）的map（过滤器），其中的值不会被迭代。

如何从角度6中的示例json动态渲染ul li值

app.html

app.ts

2 个答案: