РЕДАКТИРОВАТЬ: ДЕМО РАБОЧЕГО КОДА
У меня проблемы с использованием асинхронного канала на наблюдаемой.Он работает в одном приложении, но не в другом.
Рабочий можно найти здесь: https://stackblitz.com/edit/angular-ry1dev
Неработающий код:
products.component.ts:
export class ProductsComponent implements OnInit {
products$: Observable<Product[]>;
//NOTE: this service is coming from Akita state management
constructor( private productService: ProductService ) {}
ngOnInit() {
this.products$ = this.productService.getProducts();
}
}
products.service.ts (управление состоянием Акиты):
@Injectable({ providedIn: 'root' })
export class ProductService {
constructor( private prodStore: ProductStore, private prodService: ProductsService ) {}
getProducts() {
return this.prodService.getProducts().pipe(
tap( result => {
let dataArr = [];
for (let obj in result) {
dataArr.push(result[obj]);
}
this.prodStore.add(dataArr)
})
)
}
}
products.service.ts (http, вызываемый prodService выше):
getProducts() {
return this.http.get<Product[]>(`${this.API}/products`);
}
products.component.html:
<mat-accordion *ngIf="products$" class='product-accordion'>
<mat-expansion-panel *ngFor="let product of products$ | async">
<mat-expansion-panel-header>
SKU: {{ product.sku }}
</mat-expansion-panel-header>
<p>${{ product.price }}</p>
<p>{{ product.description }}</p>
</mat-expansion-panel>
</mat-accordion>
Приведенные выше компоненты магазина и запроса идентичны компонентам stackblitz.
Я должен получить список продуктов, например список задачв стеке, но в HTML он выдает ошибку:
ОШИБКА Ошибка: не удается найти другой поддерживающий объект «[объект]] типа« объект ».NgFor поддерживает только привязку к итерируемым объектам, таким как массивы.
Почему он работает со стеком, но не в моем приложении?
РЕДАКТИРОВАТЬ: ДЕМО-НЕ РАБОЧИЙ КОД