Javascript 返回一个数组，其中包含来自Observable的响应<；{string；number；string；}[]>；

我开发了一个带有Angular 9的应用程序，我想返回一个带有我的响应的数组。在我的服务课上我有这个方法

 getReport(startDate: string, endDate: string) {
    return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions);
}

我希望getReport返回这样的数组

 list= [
    {
      name: 'Opens',
      value: Report.opens,
      color: 'green',
    },
    {
      name: 'Closes',
      value: Report.closes,
      color: 'red',
    }
]

所以我试着用一个可观察的对象，比如：

 getReport(startDate: string, endDate: string) {
     return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions).subscribe(result => { return [{
        name: 'Opens',
        value: result.opens,
        color: 'green',
      },{

        name: 'Closes',
        value: result.closes,
        color: 'red',
      }]
    });
}

getReport（开始日期：字符串，结束日期：字符串）{
返回this.http.get(
`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`，
this.httpOptions.subscribe（结果=>{return[{
名称：'打开'，
值：result.opens，
颜色：“绿色”，
},{
名称：'关闭'，
值：result.closes，
颜色：“红色”，
}]
});
}

使用此方法，我可以获得订阅返回

还有一张地图

 getReport(startDate: string, endDate: string) {
     return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions).pipe(map(result => { return [{
        name: 'Opens',
        value: result.opens,
        color: 'green',
      },{

        name: 'Closes',
        value: result.closes,
        color: 'red',
      }]
    }));
}

getReport（开始日期：字符串，结束日期：字符串）{
返回this.http.get(
`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`，
this.httpOptions.pipe（映射（结果=>{return[{
名称：'打开'，
值：result.opens，
颜色：“绿色”，
},{
名称：'关闭'，
值：result.closes，
颜色：“红色”，
}]
}));
}

但它不适用于订阅和映射

用这个方法，我有一个可观察的回报 我只是希望返回->{name:string；value:number color:string；}[]不可见

那么有可能做到这一点吗？或者/以及我如何做到这一点

---

感谢您的帮助

您可以在控制器中订阅HTTP Observable并在那里定义阵列。试试下面的方法

服务

getReport（开始日期：字符串，结束日期：字符串）{
返回this.http.get(`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`，this.httpOptions）；
}

控制器

公开报告：任何；
此.reportService.getReport（“…”，“…”）.subscribe(
响应=>{
本报告=[
{
名称：'打开'，
值：result.opens，
颜色：“绿色”，
},
{
名称：'关闭'，
值：result.closes，
颜色：“红色”，
}
];
},
错误=>{//句柄错误}
);

并在模板中使用它

{{item.name}
{{item.value}}
{{item.color}}

您可以订阅控制器中的HTTP Observable并在那里定义您的数组。试试下面的方法

服务

getReport（开始日期：字符串，结束日期：字符串）{
返回this.http.get(`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`，this.httpOptions）；
}

控制器

公开报告：任何；
此.reportService.getReport（“…”，“…”）.subscribe(
响应=>{
本报告=[
{
名称：'打开'，
值：result.opens，
颜色：“绿色”，
},
{
名称：'关闭'，
值：result.closes，
颜色：“红色”，
}
];
},
错误=>{//句柄错误}
);

并在模板中使用它

{{item.name}
{{item.value}}
{{item.color}}

我尝试使用一个带promise的异步/wait

  async getReport(startDate: string, endDate: string){
    return await this.http
      .get<Report>(
        `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
        this.httpOptions
      )
      .toPromise();
  }

---

有可能使用承诺之外的列表吗？例如，如果我想从我的方法getReport返回列表

我尝试使用一个带promise的异步/wait

  async getReport(startDate: string, endDate: string){
    return await this.http
      .get<Report>(
        `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
        this.httpOptions
      )
      .toPromise();
  }

---

有可能使用承诺之外的列表吗？例如，如果我想从我的方法getReport返回列表

不，这是不可能的。不能将异步值转换为同步值。您可以将它变成一个承诺，并使用async/await，但不是那样，而是接受可观察的对象。它们是Angular最好的部分之一。谢谢你的回复，对不起，我是从Angular开始的，所以我不知道该怎么做。我怎么能？为什么你不想返回Observable？因为我想为我的组件初始化一个数组，并使用ngfor显示数据使用

of

：

this.httpOptions）。管道（映射（结果=>{return of([{…

不，这是不可能的。您不能将异步值转换为同步值。您可以将其转换为承诺并使用async/await，但更重要的是，接受可观测值。它们是Angular最好的部分之一。感谢您的回复，抱歉，但我从Angular开始，所以我不知道如何实现。我怎么能做到？为什么您不这么做想要返回Observable？因为我想要为我的组件初始化一个数组并使用ngfor来显示数据使用

of

：

this.httpOptions）.pipe（map（result=>{return of（[{…

）或者为了避免内存泄漏，可以在视图中使用异步，或者为了避免内存泄漏，可以在视图中使用异步

getReports(startDate: string, endDate: string) {
    this.getReport('2020-03-20', '2020-03-26').then(response => {
      let lists= [
       {
        name: 'Opens',
        value: response .opens,
        color: 'green',
      },
        {
        name: 'Opens',
        value: response .opens,
        color: 'green',
      }];
    });