Вернуть массив с ответом из Observable <{string; число; строка;} []>

Question

Я разработал приложение с Angular 9 и хочу вернуть массив с моим ответом. В моем классе обслуживания у меня есть этот метод,

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

Мой объект возвращается Report

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

Итак, я попытался с наблюдаемой подпиской, например:

 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 <{name: string; значение: число цвет: строка;} []> для возврата я просто хотел бы получить это возвращение -> {имя: строка; значение: число цвет: строка;} [] не наблюдается

Так можно это сделать? или / и как я могу это сделать?

Спасибо за помощь

Answer 1

Я пытался использовать 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?

Answer 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>