如何等待服务加载数据完成？

Question

我想在组件构造函数中从 Angular 服务加载数据，并使用这些数据在 ngOnInit() 函数中更新 UI。

我正在使用 async-await 功能来实现它。

很遗憾，它不起作用。

这是我的组件源代码：

import { Component, OnInit } from '@angular/core';
import {MonthlyCalendar} from './monthly-calendar';
import { MonthlyCalendarService } from './monthly-calendar.service';
import { resolve } from 'url';
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  monthlyCalendar: MonthlyCalendar;
  constructor(private monthlyCalendarService: MonthlyCalendarService) {
    this.monthlyCalendar = null;
    console.log('t0:' + new Date());
    this._getData();

    console.log('t2:' + new Date());
  }

  ngOnInit() {
    console.log('t3:' + new Date());
    console.log(this.monthlyCalendar);
  }
  async _getData() {

    await this.monthlyCalendarService.getMonthlyCalendar(null, null)
    .then((data: MonthlyCalendar) => {
      console.log('t1:' + new Date());
      this.monthlyCalendar = data;
    })
    .catch ((err: Error) => {
      alert(err.stack);
    });
  }
}

这是我的服务源代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { MonthlyCalendar } from './monthly-calendar';
import { resolve, reject } from 'q';

@Injectable({
  providedIn: 'root'
})
export class MonthlyCalendarService {

  constructor(private http: HttpClient) { }
  getMonthlyCalendar(year: number, month: number): Promise<object> {
    const params = new HttpParams();
    if (year != null) {
      params.set('year', year.toString());
    }
    if (month != null) {
      params.set('month', month.toString());
    }
    return this.http.get('backend/getMonthlyCalendar.php', {params}).toPromise();
  }
}

这是我的component.html

<table>
  <theader></theader>
  <tbody></tbody>
</table>

我附上了屏幕转储供您参考。

Answer 1

您可以使用解析器在组件加载之前加载数据，它不会加载路由，直到数据请求被解析下面是解析器的一些示例

https://codeburst.io/understanding-resolvers-in-angular-736e9db71267

https://alligator.io/angular/route-resolvers/

所以首先创建一个解析器

import { Injectable } from '@angular/core';

import { Resolve } from '@angular/router';

import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Injectable()
export class CalendarResolver implements Resolve<Observable<string>> {
  constructor(private monthlyCalendarService: MonthlyCalendarService) {}

  resolve() {
    return this.monthlyCalendarService.getMonthlyCalendar(null, null);
  }
}

然后将此解析器添加到您的路线中

import { CalendarResolver } from './claendar.resolver';

   {
    path: 'yourpath',
    component: yourcomponent,
    resolve: { calander: CalendarResolver }
    }

将解析器添加到模块的 providers 数组中

然后在你的组件中

   constructor(private activatedRoute: ActivatedRoute)

   ngOnInit(){
    this.monthlyCalander= this.route.snapshot.data['calander'];
   }

Answer 2

您可以为此使用解析器

@Injectable()
export class MyResolver implements Resolve<SomeClass[]> {
    constructor(private myService: MyService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<SomeClass[]> {
        return this.myService.getAll().pipe(first());
    }
}

在您的路由器中，您可以注册解析器。

        {
            path: 'somepath',
            component: MyComponent,
            resolve: {
                objects: MyResolver ,
            }
        },

然后您可以在组件中访问解析后的数据，如下所示。

ngOnInit(): void {
    this.route.data.subscribe((data: any) => {
        this.objects = data['objects'];
    });
}

Answer 3

你必须在构造函数中像这样更改代码

this._getData().then(() =>  
      console.log('t2:' + new Date()
      ))

Answer 4

Angular 有一个非常好的模块 HTTPClientModule。这是建立在 RxJS Observable 包之上的。

HTTPClientModule的get等方法，返回observable，我们可以在组件中订阅，通知view更新DOM。

请看官方documentation