在 Angular 5 中渲染视图之前等待数据

Question

我是 Angular 5 的新手，并且能够使用订阅创建可以访问服务方法的视图，但遇到渲染延迟问题。用户看到第一个“未定义”字符串，0.5 秒后它变为正确的值。

这是组件的 .ts 文件：

 public trips: Trip[];
  public numberOfUsers : Map<string, number> = new Map<string, number>();

  constructor(private tripService: TripService) { }

  ngOnInit() {
   this.getTrips();
  }

  getTrips() {
    this.tripService.getTripForMe().subscribe(
      data => { this.trips = data;},
      err => console.error(err),
      () => this.initNumberOfUsers()
    );
  }

  initNumberOfUsers() {
    for (let i = 0; i < this.trips.length; i++) {
      let count;
      this.tripService.getNumberOfUsers().subscribe(
        data => { count = data},
        err => console.error(err),
        () => this.numberOfUsers.set(this.trips[i].id, count)
      );


      ;
    }
  }

  getNumberOfUsers(data) {
    return this.numberOfUsers.get(data.id);
  }

方法 initNumberOfUsers 在第一次订阅完成后调用，这很好，但 getNumberOfUsers(data) 可能在之前调用并得到“未定义”。

这是模板中的相关部分（“数据”是 ngFor 循环的当前值）：

<span [innerText]="getNumberOfUsers(data)"></span>

有没有办法确保两个订阅方法在渲染之前按顺序完成？

更新

我能够创建解析器，并且 concole 显示对象，但是我很难将数据传递给组件。

转接器代码：

import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Trip} from ....
import { TripService } from .....
import { Observable } from 'rxjs/Rx';

@Injectable()
export class TripsResolve implements Resolve<Trip[]> {

   public trips: Trip[];

   constructor(private service: TripService) {}

   resolve(route: ActivatedRouteSnapshot, 
           state: RouterStateSnapshot) {
     this.service.getTrips().subscribe(
        data => { this.trips = data },
        err => console.error(err),
        () => console.log(this.trips)
      );
      return this.trips;
   }
}

从路线

resolve: {
         trips: TripsResolve
      }

来自模块

providers: [
        ...
        TripsResolve,
        ...

组件中数据不通过/不可用：

import { Component, OnInit } from '@angular/core';
import { Trip } from ...
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: ...
  templateUrl: ...
  styleUrls: ...
})
export class MyComponent implements OnInit {

    public trips: Trip[];

    constructor(private route: ActivatedRoute,
                private router: Router) {
    }

    ngOnInit() {
        this.route.data.forEach(data => {
            this.trips = data.trips;
            console.log(this.trips);  //can't see it
       });

    } 
}

知道如何访问/检索组件中的数据吗？

Answer 1

我在通过 API 调用处理数据时遇到了类似的问题

我尝试了两种解决方案

一个正在使用 *ngIf

只有在数据准备好时才会填充 DOM。

<div *ngIf="isLoaded">Text to show</div>

另一个是使用 resolver，在渲染视图本身之前它会准备数据。但有时，如果数据加载时间过长，解析器会让您的屏幕保持空白。

@Injectable()
export class HeroDetailResolve implements Resolve {
    constructor(private heroService: HeroService, private router: Router) { }

    resolve(route: ActivatedRouteSnapshot): Promise | boolean {
        let id = +route.params['id'];
        return this.heroService.getHero(id).then(hero => {
            if (hero) {
                return hero;
            } else { // id not found
                this.router.navigate(['/dashboard']);
                return false;
            }
        });
    }
}

所以你现在有两个选择。

我建议*ngIf。在加载数据的过程中，显示​​一些加载器 gif 或一些消息，让用户知道后台发生了一些事情。

Answer 2

查看 Angular 中的解析器。

这是一个链接： https://angular.io/api/router/Resolve

很像守卫，它们在组件完全创建之前运行，并防止您在加载时必须在模板中使用 if/else 逻辑来等待。

如果您不想使用解析器，也可以执行以下操作：

<span *ngIf="myVariable; else stillLoading" [innerText]="getNumberOfUsers(data)"></span>

<ng-template #stillLoading><p>Loading...</p></ng-template>

myVariable 将是您在渲染 <span> 标记之前要定义的任何内容。我只是不想仔细查看您的地图:)

在模板中是否使用解析器或 if/else 的选择取决于您希望您的用户体验是什么样的。可能还有其他原因，但首先想到的是那个。

Answer 3

您可以使用 mergeMap 组合这两个订阅。这样，一旦触发了最后一个 sub 的完成方法，它们就会发出。

尽管在您的情况下，您可能会发现将 numberOfUsers 简单地初始化为 null 会更容易。然后在您的模板中使用 ng-show 仅在 numberOfUsers 不为空时显示跨度。

例如：

<div *ngShow="numberOfUsers">
  <span [innerText]="getNumberOfUsers(data)"></span>
</div>

干杯