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

我是Angular 5的新手，能够使用subscribe创建具有服务方法访问权限的视图，但在渲染中遇到延迟问题.用户看到第一个"未定义"字符串，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方法是在第一次subscribe完成后调用的，这很好，但是getNumberOfUsers(数据)可能是在之前调用的，并且得到"undefined".

以下是模板中的相关部分("数据"是ngFor循环的当前值):

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

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

UPDATE

我能够创建一个解析器，concole显示对象，但我很难将数据传递给组件.

Reolver code:

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;
   }
}

From route

resolve: {
         trips: TripsResolve
      }

From module

providers: [
        ...
        TripsResolve,
        ...

Data is not pass/not avilavle in the component:

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
       });

    } 
}

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