Question

我收到一个名为products的JSON数组。我正在使用ngFor循环它。

*ngFor="let product of products"

每个产品中都有一个数组，我循环遍历如下

*ngFor="let item of product.Items"

我需要在ngOnInit中设置一个等于product.items的变量。像这样的东西：

this.items = product.Items

但我无法弄清楚如何正确访问父数组（产品）的子节点，并将子节点中的数组分配给ngOnInit中的变量。

Answer 1

如果您正在使用ngOnInit（），那么您正在处理页面生命周期，因此您的代码独立于您已创建的*ngFor接口循环。

如果您想对每个对象中的每个项目执行某些操作，例如将它们包装在标记中，您可以执行以下操作：

products.map(product => {
  product.items.map(item => "<p>" + item + "</p>")
  return product;
});

这将为您提供原始产品数组，每个数组中的每个项目都包含在一些标记中。

基本上，Array.map（）是数组的内置函数，允许您对数组中的每个项运行回调。

通过将一个地图嵌套在另一个地图中，您可以在所有产品的所有项目上干净地运行代码。

这是MDN documentation for Array.map()。

使用相同的逻辑，您可以使用Array.map函数对每个数组中的每个项目执行更多或更少的操作。

在非ES6格式中，它看起来更像是这样：

products.map(function(product){
  product.items.map(function(item){
    /* You can do what you want with each item here */
    return "<p>" + item + "</p>";
  });
  return product;
});

在上面的示例中，我只是将项目包装在<p>标记中，但您可以使用条件逻辑，转换等对项目执行更复杂的处理。

您唯一需要做的就是返回将成为该项目的“新”版本的内容。

Answer 2

听起来像在ngOnInit函数中使用简单的for循环可能会解决您的问题。尝试这样的事情：

首先创建一个变量来保存数组。

this.items = [];

然后遍历您的子数组并将每个项目推送到新数组：

ngOnInit() {
  for (let i = 0; i < product.Items.length; i++) {
    let currentItem = product.Items[i];
    this.items.push(currentItem);
  }
}

如何声明数组内的数组？

2 个答案: