Question

我在可观察对象上使用异步管道时遇到问题。它可以在一个应用程序中工作，而不能在其他应用程序中工作。

可以在这里找到工作的人：https://stackblitz.com/edit/angular-ry1dev

无效代码：

products.component.ts：

variable

products.service.ts（Akita状态管理）：

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（上面的prodService调用的http）：

@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.component.html：

getProducts() {
  return this.http.get<Product[]>(`${this.API}/products`);
}

上述应用的存储和查询组件与stackblitz相同。

我应该在stackblitz中获得产品列表，例如待办事项列表，但是HTML中出现以下错误：

错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

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

编辑：DEMO OF THE NON-WORKING CODE

Answer 1

您能检查一下后端的实际响应是什么吗？您的前端的假设是要获取一个数组，但是您的后端似乎在响应这样的事情：

{
  "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;
      })
    )
  }

Answer 2

问题在于以下代码返回一个对象：

getProducts() {
  return products;
}

并且ngFor仅支持可迭代对象，例如数组。

如果要走秋田之路，应该获取产品，更新商店并在组件中查询它：

this.products$ = this.productsQuery.selectAll();

可观察到的异步管道未返回值

2 个答案: