Warten Sie, bis die Daten Vor dem Rendern der Ansicht in Winkel-5

Ich bin neu in Winkel-5 und war in der Lage, erstellen der Ansicht mit Zugang zu den service-Methoden mit Hilfe von zu abonnieren, aber die Begegnung problem in der Verzögerung zu Rendern. Die Benutzer zuerst sehen "undefined" string und nach 0,5 Sek ändern sich die auf den korrekten Wert.

Hier ist die .ts-Datei für die Komponente:

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

Die Methode initNumberOfUsers aufgerufen wird, nachdem die erste subscribe-Oberfläche, die ist gut, aber die getNumberOfUsers(Daten) genannt, wahrscheinlich vor und erhalten "undefined".

Hier ist der entsprechende Teil aus dem template ("Daten" ist der aktuelle Wert einer ngFor Schleife):

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

Gibt es eine Möglichkeit, um sicherzustellen, dass beide abonnieren Methoden werden nacheinander fertiggestellt vor dem Rendern ?

UPDATE

War ich in der Lage, erstellen Sie einen resolver und die concole zeigen, das Objekt aber, ich Schwierigkeiten haben, übergeben Sie die Daten an die Komponente.

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

Von der route

resolve: {
         trips: TripsResolve
      }

Aus Modul

providers: [
        ...
        TripsResolve,
        ...

Daten nicht weitergeben/nicht avilavle in der Komponente:

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

    } 
}

Irgendeine Idee, wie kann ich Zugang zu/abrufen der Daten in der Komponente ?

InformationsquelleAutor user2304483 | 2018-03-27