【问题标题】:Angular: What's the correct way to return Observable?Angular:返回 Observable 的正确方法是什么?
【发布时间】:2018-01-21 14:36:02
【问题描述】:

我有以下方法不正确:

  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 数组无法从 subscribe 函数中访问,但我无法获得正确的解决方案。

谁能帮帮我。我想返回一个Observable&lt;Product[]&gt;。

提前谢谢你!

【问题讨论】:

  • 初始化你的数组:让 PRODUCTS: Product[] = [];
  • @pixelbits 这修复了未定义的错误,但它肯定仍然是错误的:该函数现在同步返回一个异步修改的数组的 observable。
  • angular.io/guide/http 做一些研究
  • 为什么将结果存储在类实例中?该类是否定义了任何类型的行为? (方法)

标签: angularjs angular typescript observable


【解决方案1】:

编辑:更新以说明 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);

【讨论】:

  • 我收到以下错误:“对象”类型上不存在属性“地图”。
  • @UrmLmn 然后你的 API 调用不会返回一个数组,而是一些对象。实际响应是什么样的?
  • @UrmLmn 不管怎样,我更新了我的答案来解释它。
  • 我正在返回查询数据库得到的结果:$stmt = $this->db->query($sql); $product = $stmt->fetchAll(PDO::FETCH_OBJ);回声 json_encode($product);所以是json。
  • @UrmLmn 我已经更新了我的答案以解决这个问题。
猜你喜欢
  • 2023-01-28
  • 1970-01-01
  • 2016-11-05
  • 1970-01-01
  • 2018-08-12
  • 1970-01-01
  • 1970-01-01
  • 2020-09-10
  • 1970-01-01
相关资源
最近更新 更多