Angular 5에서 뷰를 렌더링하기 전에 데이터 대기

Angular 5에서 뷰를 렌더링하기 전에 데이터 대기

저는 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(데이터)가 이전에 호출되어 "undefined"가 됩니다.

다음은 템플릿의 관련 부분입니다("data"는 ngFor 루프의 현재 값입니다).

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

렌더링하기 전에 두 구독 방법을 모두 순차적으로 완료할 수 있는 방법이 있습니까?

갱신하다

레졸바를 만들 수 있었고 콘콜이 객체를 보여주지만 구성 요소에 데이터를 전달하는 데 어려움이 있습니다.

리올버 코드:

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

    } 
}

구성 요소의 데이터에 액세스/검색하는 방법을 알고 계십니까?

API 호출을 통해 데이터를 처리할 때 비슷한 문제에 직면한 적이 있습니다.

저는 두 가지 해결책을 시도했습니다.

하나는 *ngIf를 사용하고 있습니다.

DOM은 데이터가 준비된 경우에만 채워집니다.

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

또 다른 방법은 보기 자체를 렌더링하기 전에 데이터를 준비하는 리졸버를 사용하는 것입니다.그러나 데이터 로드에 너무 많은 시간이 걸리는 경우 해결 프로그램이 화면을 공백으로 유지할 수 있습니다.

@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 또는 메시지를 표시하여 사용자에게 백그라운드에서 어떤 일이 발생했음을 알립니다.

Angular에서 Resolver를 확인합니다.

링크는 다음과 같습니다. 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>태그. 저는 단지 당신의 지도를 그렇게 자세히 들여다보고 싶지 않았을 뿐입니다 :)

템플릿에서 해결 프로그램을 사용할지 여부는 UX를 어떻게 사용할지에 따라 결정됩니다.아마 다른 이유도 있겠지만, 그 이유가 가장 먼저 떠오릅니다.

병합 맵을 사용하여 두 구독을 결합할 수 있습니다.이렇게 하면 마지막 서브의 완료된 메서드가 트리거되면 이들이 내보냅니다.

사용자의 경우 단순히 NumberOfUsers를 null로 초기화하는 것이 더 쉬울 수 있습니다.그런 다음 템플릿에서 eng-show를 사용하여 numberOfUsers가 null이 아닌 경우에만 범위를 표시합니다.

ex:

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

건배.

언급URL : https://stackoverflow.com/questions/49504266/wait-for-data-before-rendering-view-in-angular-5