Question

我试图在typescript中迭代一组对象，但收到错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined

以下是我的代码：

export class Data{
    products: Product[];

constructor( 
        private route: ActivatedRoute, 
        private router: Router,
        private _http:HttpClient){
            this.getProducts().subscribe(products=> this.products= products);

        } 


    ngOnInit(){
        let productId = this.route.snapshot.params['id'];
        this.id= productId;
        this.getProducts();
        this.findProduct();
    }

    findProduct(){
      this.products.forEach((product,index) =>{
          console.log(product.name);
          console.log(index);
      })
    }

    getProducts(){
        return this._http.get<Product[]>('../src/assets/product-data.json');
    }

我尝试了很多解决方案，但都没有效果。我在模块中导入了BrowserModule和CommonModule。无论如何我能解决这个问题吗？

由于

Answer 1

欢迎来到异步执行的世界。

执行findProduct()方法时，尚未返回检索产品信息的HTTP请求，因此尚未定义/初始化products数组。

要解决此问题，请将对findProduct()的调用添加到getProducts()的观察者：

this.getProducts().subscribe(products => {
  this.products = products;
  this.findProduct();
});

将该逻辑放在ngOnInit()方法而不是构造函数中可能也更清晰。

Answer 2

我最好的猜测是，当您尝试迭代数组时，可观察结果尚未完成。因此，数组仍未定义。

尝试在构造函数中将产品设置为[]，然后在ngOnInit中订阅observable。这应该至少可以防止出现未定义的错误。

无法在angular typescript中循环遍历数组

2 个答案: