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

Question

在我的组件和我的服务下方

报告.component.html

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

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

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

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

</div>

报告.component.ts

export class ReportComponent implements OnInit{

reports = this.reportService.getLists('2020-03-20', '2020-03-26');

constructor(private reportService: ReportService) {}

ngOnInit(){}

}

报告服务.ts

export 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 {&nbsp; public getReport(startDate: string, endDate: string): Observable<any> {&nbsp; &nbsp; return this.http.get(`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`, this.httpOptions)&nbsp; &nbsp; &nbsp; .pipe(map(response => {&nbsp; &nbsp; &nbsp; &nbsp; return&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { name: 'Opens', value: response.opens, color: 'green' },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { name: 'Opens', value: response.opens, color: 'green' }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; }));&nbsp; }}控制器import { Component, OnInit, ChangeDetectorRef } from '@angular/core';export class ReportComponent implements OnInit {&nbsp; reports: any&nbsp; constructor(private reportService: ReportService, private _cdr: ChangeDetectorRef) { }&nbsp; ngOnInit() {&nbsp; &nbsp; // you still need to subscribe to obtain the result&nbsp; &nbsp; this.reportService.getLists('2020-03-20', '2020-03-26').subscribe(&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; response => { this.reports = response },&nbsp; &nbsp; &nbsp; error => { // handle error }&nbsp; &nbsp; );&nbsp; &nbsp; this._cdr.detectChanges();&nbsp; }}更新您还可以在呈现数据之前进行检查。<ng-container *ngIf="reports">&nbsp; <div *ngFor="let report of reports">&nbsp; &nbsp; <p>{{report.name}}</p>&nbsp; &nbsp; <p>{{report.value}}</p>&nbsp; &nbsp; <p>{{report.color}}</p>&nbsp; </div></ng-container>

Answer 2

如果我使用它，我可以在日志中看到对象返回，但是为什么模板不适用于数组列表上的循环？export class ReportComponent implements OnInit {&nbsp; reports: any&nbsp; constructor(private reportService: ReportService) { }&nbsp; ngOnInit() {&nbsp; &nbsp; // you still need to subscribe to obtain the result&nbsp; &nbsp; this.reportService.getLists('2020-03-20', '2020-03-26').subscribe(&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; response => {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.reports = response;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(this.reports);&nbsp;&nbsp;&nbsp; &nbsp; });&nbsp; }}