返回一个带有 Observable<{string; 响应的数组数字;字符串;}[]>答案

【问题标题】：Return an array with response from Observable<{string; number; string;}[]>返回一个带有 Observable<{string; 响应的数组数字;字符串;}[]>
【发布时间】：2020-07-07 00:23:05
【问题描述】：

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

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

我的对象返回是报告

export interface Report {
  range: string;
  opens: number;
  closes: number;
}

我希望 getReport 返回一个这样的数组。

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

所以我尝试了一个订阅 observable ，例如：

 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(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',
      }]
    }));
}

但它不适用于订阅和地图。

使用这种方法，我有一个 Observable 为返回我只是想要这个 return -> {name: string;值：数字颜色：字符串；}[] 不可观察

那么有可能做到吗？或/和我怎样才能做到这一点？

感谢您的帮助

【问题讨论】：

不，这是不可能的。您不能将异步值转换为同步值。你可以把它变成一个promise并使用async/await，但不是那样，而是拥抱observables。它们是 Angular 中最好的部分之一。
谢谢你的回复，抱歉，我是从角度开始的，所以我不知道怎么做。我怎么能？
为什么你不想返回 Observable ?
因为我想为我的组件初始化一个数组并使用 ngfor 来显示数据
使用of:this.httpOptions).pipe(map(result => { return of([{ ...

标签： javascript angular typescript

【解决方案1】：

我尝试使用带有 promise 的 async/await

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

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',
      }];
    });

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

【讨论】：

【解决方案2】：

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

服务

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

控制器

public report: any;

this.reportService.getReport('...', '...').subscribe(
  response => {
    this.report = [
      {
         name: 'Opens',
         value: result.opens,
         color: 'green',
      },
      {
         name: 'Closes',
         value: result.closes,
         color: 'red',
      }
    ];
  },
  error => { // handle error }
);

并在模板中使用

<ng-container *ngIf="report">
  <div *ngFor="let item of report"> 
    {{ item.name }}
    {{ item.value }}
    {{ item.color }}
  </div>
<ng-container>

【讨论】：

或者避免内存泄漏可以吗？视图中的异步