Angular 2 - 你将如何订阅多个变量？答案

【问题标题】：Angular 2 - How would you subscribe multiple variables?Angular 2 - 你将如何订阅多个变量？
【发布时间】：2016-04-29 18:04:59
【问题描述】：

使用 Angular 2，我从服务接收 JSON 数据。像这样的：

{
    "customerName": "foo",
    "customerAddress": "123 Somewhere",
    "products": 
    [
        {
            "productName": "bar",
            "productNumber": 123 
        },
        {
            "productName": "baz",
            "productNumber": 456             
        }
    ]
}

在我的组件中，我订阅了服务以填充 customerData。

private _getData() {
    this._myService
        .getData()
        .subscribe(
            customerData => this.customerData = customerData,
            error => this.errorMessage = error
        );
}

此代码工作正常。

在 JSON 转储中有两个数据“分组”，客户数据和产品数据，后者在数组中。理想情况下，我想单独填充产品数据。像这样的：

        .subscribe(
            customerData => this.customerData = customerData,
            productData => this.productData = customerData.products
            error => this.errorMessage = error
        );

这可能吗？如果可以，我将如何编写订阅代码？

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

你可以写订阅像

    subscribe(
        customerData => 
        { 
         this.customerData = customerData;
         this.productData =customerData.products;
        },
        error => this.errorMessage = error
    );

或者

   subscribe(
        function(customerData)
        { 
         this.customerData = customerData;
         this.productData =customerData.products;
        },
        error => this.errorMessage = error
    );

【讨论】：

我正在寻找这个。你救了我。

【解决方案2】：

您可以在subscribe() 回调中拆分数据：

private _getData() {
   this.customerData = {};
   this.productData  = {};
   this._myService.getData().subscribe(data => {
      Object.keys(data).forEach(key => {
         if(key.startsWith("customer")) {
            this.customerData[key] = data[key];
         } else {
            this.productData[key]  = data[key];
         }
      });
   });
 }

请注意，IE 不支持startsWith()。

或者您可以拆分服务内的数据。一种方法如下：

在服务中，创建两个Subjects in your service 和来自这些主题的两个可观察对象，例如，custData$、prodData$
在服务中，subscribe() 到你的http.get() observable，并如上所示拆分数据
调用this.custData$.next(this.customerData) 和this.prodData$.next(this.productionData) 发出数据
让您的组件订阅custData$, prodData$

【讨论】：

【解决方案3】：

对于我想要分离的每个数据，我都有一个 observable，如下所示：

服务

private getDataFromHttp() {
    return this._http
        .get(this.url)
        .map(res => res.json())
        .do(data => {
            console.log(data);
        });
}
public getCustomerData() {
    getDataFromHttp()
        .map(res => res.customerData)
}
public getProductData () {
    getDataFromHttp()
        .map(res => res.productData)
}

组件

private _getData() {
    this._myService
        .getCustomerData()
        .subscribe(
            customerData => this.customerData = customerData,
            error => this.errorMessage = error
        );
}

private _getData() {
    this._myService
        .getProductData()
        .subscribe(
            productData => this.productData = productData,
            error => this.errorMessage = error
        );
}

这个例子将为每个函数调用发出一个 http 请求，HERE 是另一篇关于我如何缓存 observable 以不每次都从服务器请求数据的帖子：caching results with angular2 http service

【讨论】：