Question

我一开始有包含Stores[]--->Products[]--->ProductDetails--->ProductTags[]的JSON，我想查看所有数据所以我编码：

服务

export class StoreService {
  //private myurl: string ="apidata/products.json"
  constructor(private _http: Http) {}
  getProducts(): Observable < any > {

    let apiUrl = './assets/products.json';
    return this._http.get(apiUrl)
      .pipe(map((response: Response) => {
        const data = response.json();
        return data;
      }));
  }

商店组件：

export class StoreComponent implements OnInit {
  products = [];

  constructor(private _storeService: StoreService) {}

  ngOnInit() {
    this._storeService.getProducts()
      .subscribe(data => {
        this.products = data;
        console.log(data)
      });
  }

}

html

<h2>store</h2>
<ul>
  <li *ngFor="let p of products">{{p}}</li>
</ul>

我得到的错误：

尝试区分'[object Object]'时出错。只有数组和可迭代对象是允许

Answer 1

所收到的错误提示您的数据是对象/映射，而不是数组。

如果要在模板中使用* ngFor，则数据必须是数组而不是对象。

尽管角度小组在 6.1版中引入了一个名为“键值” 的管道。因此，您可以利用它并在角度模板内的对象上进行迭代。

例如，假设您的对象如下所示

const user = {
    name: 'xyz',
    age: 30,
    gender: 'male'
};

因此，在模板文件中，您可以像这样遍历此对象

<ul>
    <li *ngFor="let data of user | keyvalue">
        Key : {{data.key}} and Value : {{data.value}}
    </li>
</ul>

有关此管道的更多信息，请参考this link

Answer 2

此错误的主要目的是您的data（产品）正在返回对象{}-ngFor需要数组[]进行迭代。您必须检查HTTP响应或修复后端API。

仅以您的示例为例，您可以执行此操作this.products = data.Stores; （如果要迭代的是 stores ）。

更新

根据注释中的链接，您必须将代码更改为：

this.products = data.Stores;

然后：

<div *ngFor="let p of products">
    <ul>
      <li *ngFor="let item of p">
       <-- HERE you take whatever you want from your product object --!>
      </li>
    </ul> 
</div>

Answer 3

将对象作为输入传递给*ngFor时，通常会出现此错误。由于错误状态，*ngFor仅适用于可迭代数据结构，在我们的情况下，它将是一系列产品。

确保此处的this.products = data;，data实际上是一个数组。

更新：

从控制台日志的以下屏幕截图中可以明显看出：

data是一个对象，而不是数组。该对象上的PriceFilter，Stores和GenderFilter是数组。如果要显示stores，可以执行以下操作：

export class StoreComponent implements OnInit {
  stores = [];

  constructor(private _storeService: StoreService) {}

  ngOnInit() {
    this._storeService.getProducts()
      .subscribe(data => {
        this.stores = data.Stores;
        console.log(data)
      });
  }

}

在模板中

<h2>store</h2>
<ul>
  <li *ngFor="let store of stores">
    <h4>Products:</h4>
    <ul>
      <li *ngFor="let product of store.Products">
        <p>Product Id: {{ product.ProductId }}</p>
        <p>Product Title: {{ product.ProductTitle }}</p>
        ...
      </li>
    </ul>
  </li>
</ul>

无法使用ng-for

3 个答案:

更新：