2

我对在 angular2 中使用数组的概念完全陌生。我的 JSON 数据来自后端，存储在一个名为“arr”的数组中。但是我想访问一个存在于“arr”中的每个对象中的数组，即“arr”中的每个对象都有一个包含一些元素的数组。我想在我的 .ts 文件而不是 HTML 文件中访问该数组。我需要在 .ts 文件中对此进行一些修改，所以我想知道如何为它创建一个管道。

我读到我们需要使用管道。但我不明白如何为此使用管道。如果您在图片中看到有一个包含 3 个对象的主数组，并且 3 个对象中的每一个都有一个名为 categories 的数组，该数组又包含对象。我想访问主数组中存在的所有 3 个对象的类别内的字段“类别”。有人可以帮我做吗？

这就是我的数据的样子

4

2 回答 2

2

如果是 html

<div *ngFor="let item of arr">
 {{item.aliasname}}
 <div *ngFor="let category of item.categories">
    {{category.name}}
 </div>
</div>

在类型脚本中，您可以使用 foreach 循环

arr.forEach(element => {
    element.forEach(category => {
       console.log(category.name);
       // Do whatever you want
       // You can access any field like that : category.yourField
    });
});

在 Angular2 中进行 foreach 的另一种方法

于 2017-04-05T12:52:34.803 回答
1

这里不需要管道，管道将用于在模板中实际显示数据，例如，如果您需要迭代对象键，这不能与*ngFor. 但是既然你想操作组件中的数据......

您需要两个forEaches才能到达不同对象内的每个类别。在收到数据后，您需要从回调（订阅）中执行此操作，这里有更多信息：如何从 angular2 中的 Observable/http/async 调用返回响应？

我建议您在服务中执行 http 请求，并订阅组件中的数据，因此在您的组件中，调用该服务方法并订阅响应，然后使用 forEach：

ngOnInit() {
  this.service.getData()
    .subscribe(data => {
      this.searchResults = data;
      // call method or manipulate data here since response has been received
      this.manipulateData();
    });
}

manipulateData() {
    this.searchResults.forEach((x:any)=> { // iterate outer array
      x.categories.forEach((y:any) => { // iterate the categories of each object
        console.log(y.name) // ... or whatever properties you have
        // manipulate your data
      })
    })
}

演示

于 2017-04-05T14:07:04.993 回答