Как заставить компонент рендериться когда он получит данные с сервера?

Question

[Masterstvo]

Доброго времени суток!

Обращаюсь к знатокам Angular. Возникла такая проблема:

Есть компонент, который рендерится при старте приложения. Он получает данные из сервиса. В сервис в свою очередь данные приходят с сервера (через http в конструкторе происходит присваивание). Проблема в том, что при старте приложения данные не успевают попасть в переменные сервиса. И соответственно возникают ошибки из-за того что компонент обращается к данным которых ещё нет.

Ниже код сервиса:

import { Injectable, EventEmitter } from '@angular/core';
import { PriceService } from './price.service';
import { Http, Response } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class ModuleDataService {

    private datePriceUrl = 'data/data-module.json';
    private dataModuleAll: any;
    errorMessage: string;

    constructor(private priceService: PriceService, private http: Http){

        this.http.get(this.datePriceUrl)
            .map(this.extractData)
            .catch(this.handleError)
            .subscribe(
                organization => this.dataModuleAll = organization,
                error =>  this.errorMessage = <any>error);
    }

    getData(){
        return this.dataModuleAll;
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }

    private handleError (error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

Код компонента:

import { Component, OnInit } from '@angular/core';
import { ModuleDataService } from '../../service/data-all.service';

@Component({
    moduleId: String(module.id),
    selector: 'app-modules',
    templateUrl: './app-modules.html',
    styleUrls: ['app-modules.css']
})

export class AppModules implements OnInit{

    constructor(private moduleDataService: ModuleDataService){ }

    ngOnInit(){
        this.data = this.moduleDataService.getDataAll();
    }

}

Подскажите пожалуйста, что я делаю не так? Как данную ситуацию можно исправить, потому что она типичная?

Comments

[Олег Драпеза]

Добрый день!

1) Добавьте в компонент данные по умолчанию (пустой массив например), что бы не ловить ошибок.

2) Вам нужно продумать одну схему, по которой обмениваются данными компоненты и сервисы.
Например, сервис при изменении данных генерирует событие, компонент подписан на это событие, и при получении - берет данные из сервиса.

[Masterstvo]

Олег Драпеза: согласен, можно добавить некие данные по умолчанию. Но смысл - заставить компонент дождаться данных перед тем как он отрендерится (что-то типа прилоадера). Он же берет какой то таймаут пока готовит приложение к запуску. Я недавно с ангуляр. Наверняка есть какой-то стандартный способ!!!

[Олег Драпеза]

Masterstvo: в таком случае вы в шаблоне где этот компонент вызываете, делаете два ngIf, один на прелоадер, второй на сам компонент. И создаете и изменяете соответствующую переменную, которая меняется, когда загрузка началась, и когда закончилась.

Answer 1

[ozknemoy]

надо не затычку ставить private dataModuleAll: any; а нормально прописать его внутреннюю структуру. либо в верстке ставить признак необязательности например dataModuleAll?.someKey. либо резолв на загрузку стейта. первое предпочтительнее.