时间戳

首页 > 解决方案 > 可观察的异步管道不返回值

angular - 可观察的异步管道不返回值

问题描述

编辑：非工作代码的演示

我在可观察对象上使用异步管道时遇到问题。它适用于一个应用程序，但不适用于另一个应用程序。

工作的可以在这里找到：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（上面 prodService 调用的 http）：

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>

上述应用的 store 和 query 组件与 stackblitz 相同。

我应该得到一个产品列表，比如 stackblitz 中的待办事项列表，但它在 HTML 中出错：

错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

为什么它可以在 stackblitz 上运行，但不能在我的应用程序中运行？

编辑：非工作代码的演示

标签： angularrxjsangular-akita

解决方案

你能检查一下后端的实际响应是什么吗？您的前端的假设是获取一个数组，但似乎您的后端正在响应如下内容：

{
  "something": {},
  "something": {}
}

响应应该是一个数组，如下所示：

[
  "something": {},
  "something": {}
]

编辑： 如果我们不能改变后端行为。然后我们需要更新我们的 getProducts 方法以返回我们的异步产品绑定所需的内容。

getProducts() {
    return this.prodService.getProducts().pipe(
      map( result => {
        let dataArr = [];
        for (let obj in result) {
          dataArr.push(result[obj]);
        }

        this.prodStore.add(dataArr);
        return dataArr;
      })
    )
  }

推荐阅读