如何通过 observables 从后端接收多个值答案

【问题标题】：How to receive more than one values from the backend via observables如何通过 observables 从后端接收多个值
【发布时间】：2021-06-03 10:29:40
【问题描述】：

我有以下发布的服务，该服务连接到后端，作为后端的响应，我希望有两个值 x1 abd x2 我想知道如何修改下面的代码以便能够接收两个值

代码：

public startWebService(fieldGeometry) {
var endpointURL = 
this.buildEndpointURLForLIDARWebService(fieldGeometry);
return this.httpClient.get(endpointURL)
  .subscribe((responseFromBackend)=>{
    {x1,x2} = responseFromBackend;
});
}

更新

响应来自 python 代码，调用的 web 服务将返回两个值，比如 x1 和 x2。

【问题讨论】：

请分享示例 API 响应以更好地理解问题。
@MohitKhandelwal 我不清楚您的要求。我在问题中添加了示例/代码。请澄清
responseFromBackend 变量的值是多少？
@MohitKhandelwal 我希望从与后端的通信中收到两个值
你想从一个请求中接收两个发射吗？

标签： angular angular-services angular-event-emitter

【解决方案1】：

我建议您从后端获取响应作为 JSON 对象，即键值对对象。因此，您可以使用它们的密钥访问这些属性。您不需要将它们“映射”到额外的对象。因为 Angular 使用的是 TypeScript，所以我建议您声明对象的接口，这里有一个示例：

export interface MyObject {
    x1: number;
    x2: number;
}

当您稍微修改您的请求时，您可以在订阅中访问这些值。要说 TS 响应具有哪些属性，请使用您的界面。如果我理解正确，您希望将响应保存在类的变量中，因此首先声明它（您需要 undefined 或 null 因为 http-client 异步工作，并且当页面加载响应时可能需要一些时间）：

myObject: MyObject | undefined | null;

然后在你的方法中订阅 observable，它是 http-client 的返回类型，并将数据保存在你的 myObject 变量中：

public startWebService(url: string): void {
    this.httpClient.get<MyObject>(url)
        .subscribe(data => {
            myObject.x1= data.x1;
            myObject.x2= data.x2;
        });
}

【讨论】：

【解决方案2】：

修改您的服务代码如下，以从后端接收两个空格分隔的值：

public startWebService(fieldGeometry) {
  var endpointURL = this.buildEndpointURLForLIDARWebService(fieldGeometry);
  this.httpClient.get(endpointURL).subscribe((responseFromBackend)=>{
    result = {x1: null, x2: null};
    result.x1, result.x2 = responseFromBackend.split(' ');  // assuming values are space separated
    return result;
  });
}

【讨论】：

请您阅读我添加的更新部分。它不是空格分隔的值