Блог

Я реализовал простое приложение с магазином NgRx, и у меня возникли проблемы с отображением данных из магазина с помощью AsyncPipe. В консоли я получил сообщение об ошибке:

Ошибка: не удается найти другой вспомогательный объект ‘[object Object]’ типа ‘object’. ngFor поддерживает привязку только к итерациям, таким как массивы.

Мой код из компонента:

 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { ProductListState } from 'src/app/models/state';
import { Observable, of } from 'rxjs';
import { loadProductList } from '../../actions/products.actions';
import { Product } from '../../models/product';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductListComponent implements OnInit {

  constructor(private store: Store<ProductListState>) { }

   products$: Observable<Product[]> = this.store.select(state => state.products);
   isLoading$: Observable<boolean> = this.store.select(state => state.isLoading);

  ngOnInit(): void {
    this.store.dispatch(loadProductList());
  }
} 
 

И в шаблоне я хочу отобразить его, как показано ниже, используя AsyncPipe:

 <tr *ngFor="let product of products$ | async; let i = index">
    <th scope="row">{{product.id}}</th>
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
</tr>
 

Я предполагаю, что NgRx и диспетчерские действия работают хорошо, потому что в Store DevTools я могу видеть полученные данные:

Состояние после загрузки списка продуктов — DevTools

Ошибка с консоли