Angular:返回Observable的正确方法是什么?

时间:2018-01-21 14:36:03

标签: angularjs angular typescript observable

我有以下方法无效:

  getProducts(): Observable<Product[]> {
      let PRODUCTS: Product[];
      this.http.get(this.base_url + "api/products")
      .subscribe(
        (data) => {
            for(var i in data) {
                PRODUCTS.push(new Product(data[i].id, data[i].name, data[i].category, data[i].description, data[i].price, data[i].amount));
            }
        },
        (error) => {
            console.log(error);
      });
      return of(PRODUCTS);
  }

我得到的错误是:

TypeError: Cannot read property 'push' of undefined

现在,我知道从订阅功能中无法访问PRODUCT数组,但我无法获得正确的解决方案。

任何人都可以帮助我。我想要返回Observable<Product[]>

提前谢谢!

1 个答案:

答案 0 :(得分:4)

编辑:已更新,以说明API似乎返回类似于数组的对象而不是真正的数组。

您想使用map

getProducts(): Observable<Product[]> {
  return this.http.get(this.base_url + "api/products")
    .map(data => {
      let products = [];
      for (let i in data) {
        products.push(new Product(data[i].id, data[i].name, data[i].category, data[i].description, data[i].price, data[i].amount));
      }

      return products;
    })
    .do(null, console.log);
}

由于@ pixelbit的评论尽管错误仍然保持上升,但这里有一个例子说明它为什么是错误的:

// Fakes a HTTP call which takes half a second to return
const api$ = Rx.Observable.of([1, 2, 3]).delay(500);

function getProducts() {
  let products = [];
  api$.subscribe(data => {
    for (let i in data) {
      products.push(data[i]);
    }
  });

  return Rx.Observable.of(products);
}

// Logs '[]' instead of '[1, 2, 3]'
getProducts().subscribe(console.log);