Невозможно перебрать массив в машинописном тексте angular
Я пытаюсь перебрать массив объектов внутри машинописного текста, но получаю ошибку:
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.info(product.name);
console.info(index);
})
}
getProducts(){
return this._http.get<Product[]>('../src/assets/product-data.json');
}
Я пробовал много решений, но ни одно не помогло.
Я импортировал BrowserModule и CommonModule в свой модуль.
Могу ли я как-нибудь решить эту проблему?
Спасибо
Ответы 2
Добро пожаловать в мир асинхронного выполнения.
Когда вы выполняете свой метод findProduct(), HTTP-запрос, который извлекает информацию о продукте, еще не вернулся, поэтому ваш массив products еще не определен / инициализирован.
Чтобы исправить это, добавьте вызов findProduct() в обозреватель для getProducts():
this.getProducts().subscribe(products => {
this.products = products;
this.findProduct();
});
Возможно, также будет проще поместить эту логику в ваш метод ngOnInit() вместо вашего конструктора.
Мое лучшее предположение состоит в том, что наблюдаемое не было завершено к тому времени, когда вы пытаетесь перебрать массив. Таким образом, массив все еще не определен.
Попробуйте установить для продуктов значение [] в конструкторе, а затем подписаться на наблюдаемое в ngOnInit. Это должно как минимум предотвратить неопределенную ошибку.
Большое спасибо, Робби. :)