Angular 我如何用异步和承诺初始化和填充数组

Question

在我的组件和我的服务下方报告.component.html<div *ngFor="let report of reports">        <p>{{report.name}}</p>        <p>{{report.value}}</p>        <p>{{report.color}}</p></div>报告.component.tsexport class ReportComponent implements OnInit{reports = this.reportService.getLists('2020-03-20', '2020-03-26');constructor(private reportService: ReportService) {}ngOnInit(){}}报告服务.tsexport class ReportService {async getLists(startDate: string, endDate: string) {    this.getReport('2020-03-20', '2020-03-26').then(response => {      let lists = [    {        name: 'Opens',        value: response .opens, //2        color: 'green',      },        {        name: 'Closes',        value: response .opens, //1        color: 'red',      }];      return lists;    });  } async getReport(startDate: string, endDate: string) {    return await this.http      .get<Report>(       `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,        this.httpOptions      )      .toPromise();  } }可以初始化和填充数组列表吗？我想在我的模板中使用 ngFor 循环，我不知道我是在组件还是服务中初始化数组。什么是最好的解决方案？更新export class ReportComponent implements OnInit {  reports: any;  constructor(private reportService: ReportService) { }  ngOnInit() {    // you still need to subscribe to obtain the result    this.reportService.getLists('2020-03-20', '2020-03-26').subscribe(        response => {            this.reports = response;             console.log(this.reports);      });  }}我测试了你的答案，但是它不起作用，我只是尝试用值初始化我的数组，我的模板上有结果所以我认为，init数组不好..我只想使用报告对象从数组 List 初始化属性值，例如 this.list[0].value = report.opens 我不知道它是否清楚....输出(2) […]    0: {…}        name:"Opens"        value: 2        color:"green"        <prototype>: Object { … }    1: {…}        name:"Closes"        value: 1        color: "red"        <prototype>: Object { … }    length: 2    <prototype>: Array []在组件中的 console.log(this.report) 上方。

Answer 1

您正在尝试进行同步调用，而该调用又会发出异步请求。那不管用。当您在调用链中的某处进行异步调用时，您需要遵循它的规则。无论您尝试如何，它都不会返回同步数据。

另一方面，您可以将异步调用的响应映射到您的格式数组。但是要检索这个数组，您仍然需要遵守异步请求的规则。

尝试以下

服务

export class ReportService {

  public getReport(startDate: string, endDate: string): Observable<any> {

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

      .pipe(map(response => {

        return 

        [

          { name: 'Opens', value: response.opens, color: 'green' },

          { name: 'Opens', value: response.opens, color: 'green' }

        ]

      }));

  }

}

控制器

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class ReportComponent implements OnInit {

  reports: any

  constructor(private reportService: ReportService, private _cdr: ChangeDetectorRef) { }

  ngOnInit() {

    // you still need to subscribe to obtain the result

    this.reportService.getLists('2020-03-20', '2020-03-26').subscribe(  

      response => { this.reports = response },

      error => { // handle error }

    );

    this._cdr.detectChanges();

  }

}

更新

您还可以在呈现数据之前进行检查。

<ng-container *ngIf="reports">

  <div *ngFor="let report of reports">

    <p>{{report.name}}</p>

    <p>{{report.value}}</p>

    <p>{{report.color}}</p>

  </div>

</ng-container>

Answer 2

如果我使用它，我可以在日志中看到对象返回，但是为什么模板不适用于数组列表上的循环？

export class ReportComponent implements OnInit {

  reports: any

  constructor(private reportService: ReportService) { }

  ngOnInit() {

    // you still need to subscribe to obtain the result

    this.reportService.getLists('2020-03-20', '2020-03-26').subscribe(  

      response => { 

           this.reports = response;  

           console.log(this.reports);  

    });

  }

}