可观察到的异步行为导致变量不确定

Question

我在Angular2中创建了一项服务，该服务负责对Java服务进行休息，并使用HTTP可观察到。

getAll(): Observable<Product[]>{
    let data$ = this.http
        .get(`${this.baseUrl}/productdata`, {headers: this.getHeaders()})
        .map(mapData)
        .catch(handleError);
    console.log(' object array:' , data$)
    return data$;
}

然后，我已经在我的组件中写了一个可观察到的订户，并放置在ngoninit（）方法中，并且只想提取第一个 product ，就放置在ngoninit（）中。

。

this.product = this.products [0];

ngOnInit() {
 this.productService
        .getAll()
        .subscribe(
            /* happy path */ p => this.products = p,
            /* error path */ e => this.errorMessage = e,
            /* onComplete */ () => this.isLoading = false);
this.product = this.products[0];
}

但是，OnInit方法中的最后一个操作是导致生产 t由于可观察到的异步行为而被不确定。同样，我也无法使用 product 的属性在HTML组件中插值。我希望提取是自动的。那么，您能为我提供一种方法吗？

Answer 1

您实际上回答了自己的问题 - 由于它是异步的，因此请立即调用您对this.product = ...的调用，而可观察到的可观察到需要一些时间才能返回。解决方案很简单：

ngOnInit() {
 this.productService
    .getAll()
    .subscribe(
        /* happy path */ p => {
            this.products = p;
            this.product = this.products[0];
        },
        /* error path */ e => this.errorMessage = e,
        /* onComplete */ () => this.isLoading = false);
}

包括可观察回调的内部集合。

Answer 2

您的代码：

this.product = this.products[0];

在定义之前要执行。将其移至成功函数

this.productService
    .getAll()
    .subscribe(
        /* happy path */ p => {
            this.products = p;
            this.product = this.products[0];
        },
        /* error path */ e => this.errorMessage = e,
        /* onComplete */ () => this.isLoading = false
);

Answer 3

由于您使用的是可观察到的，因此您可以从已使用的所有方法（例如.map（）函数等可观察的方法中。

this.productService
  .getAll()
  .map(products => products[0])
  .subscribe(
    /* happy path */ product => this.product = product,
    /* error path */ e => this.errorMessage = e,
    /* onComplete */ () => this.isLoading = false
  );