错误错误：未捕获（承诺）：TypeError：this.products不可迭代。 （但这是可迭代的）

Question

我想从 JSON 数组中获得唯一的值。

数据来自提取API。显然是可迭代的

[请注意，产品变量是JSON的示例，实际上，我是通过调用GetAllProducts（）来填充数据的。]

products = 
[
  {
    "name": "APPLE 27 inch THUNDERBOLT DISPLAY",
    "show_room": "A iCenter",
    "stock": "1",
    "type": "DISPLAYS",
    "category": "APPLE",
    "id": "101"
  },
  {
    "name": "APPLE WIRELESS KEYBOARD",
    "show_room": "B iCenter",
    "stock": "2",
    "type": "MOUSE",
    "category": "MAC ACCESSORIES",
    "id": "107"
  }
]

当我尝试执行此功能时发生错误：getDistinctCategoryValues（）

这是我的 .ts 文件

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.page.html',
  styleUrls: ['./product-list.page.scss'],
})
export class ProductListPage implements OnInit {

  constructor(private dataService: DataService,
              private router: Router) {
    this.GetAllProducts();
    this.getDistinctCategoryValues();
  }

  products: any;


  ngOnInit() {
  }

  async GetAllProducts() {
    const response = await this.dataService.GetProducts();
    const dataService = await response.json();
    this.products = dataService;
    console.log(this.products);
  }

  getDistinctCategoryValues() {

    const lookup = {};
    const result = [];

    console.log(this.products);
    for (const item of this.products) {
      const currentVar = item.category;

      if (!(currentVar in lookup)) {
        lookup[currentVar] = 1;
        result.push(currentVar);
      }
    }

    console.log(result);
    return result;

  }

}

现在，当我运行getDistinctCategoryValues（）时，出现错误：

ERROR Error: Uncaught (in promise): TypeError: this.products is not iterable.

奇怪的是，

1. 当我console.log() GetAllProducts()时，products变量中的所有数据都很好
2. 但是当我console.log() getDistinctCategoryValues()时，产品变量显示为未定义

IDK出了什么问题。为什么数据仅在1行后消失？ [参见构造函数]。我的API正在运行，并且没有错误。

[顺便说一句，我正在使用https://www.npmjs.com/package/json-server for JSON]

Answer 1

这是因为您的GetAllProducts是一个异步函数，它正在等待响应const response = await this.dataService.GetProducts()；这意味着GetAllProducts函数范围内的所有代码都不会运行，而异步函数之后运行的任何代码都将正常运行，因此为什么this.product将始终返回undefined 解决此问题的方法是将getDistinctCategoryValues()移到await函数中，或使GetAllProducts返回产品，然后在getDistinctCategoryValues()中使用它，或使用生成器函数

Answer 2

您只需要更改产品：任何；到产品= []； 其他所有想法都应该没有任何改变地起作用。

和

constructor（私有dataService：DataService， 专用路由器：路由器）{ this.GetAllProducts（）; this.getDistinctCategoryValues（）; }

将无法正常工作。您需要移动this.getDistinctCategoryValues（）;。到ngOnInit，或调用this.GetAllProducts（）