Наблюдение за функцией в Angular 5 - PullRequest
Новая
       28

Наблюдение за функцией в Angular 5

0 голосов
/ 23 мая 2018

Мне кажется, я не понимаю Observables .У меня есть 2 компонента ChartsComponent и, скажем, AppComponent .AppComponent получает информацию из базы данных и передает ее через ChartsService в ChartsComponent для ее рисования.Дело в том, что селектор ChartsComponent <charts></charts> загружается в AppComponent одновременно, поэтому данные базы данных поступают в ChartsComponent после построения .Я подумал, что мог бы использовать Observable для отслеживания ответа базы данных и обновления логической переменной ngIf для загрузки селектора и построения ChartsComponent.

App.component.html: 

<div *ngIf="chartsBoolean">
    <charts-component-selector></charts-component-selector>
</div>

App.component.ts.Буду ли я запускать Observable в конструкторе? 

constructor( private chartsService: ChartsService ){

    var chartsBoolean = false;

    var myObservable = new Observable(observer =>{
        this.chartsBoolean = true;
    })

    let subscription = myObservable.subscribe(

    );
}

//this is the method I think I should be monitoring

getChartDataFromDatabase(){
    //onSuccess inserts database response into charData 
    this.chartsService.setChartData(charData);
}

Charts.service.ts => просто геттеры и сеттеры

Charts.Component.ts 

constructor( private chartsService: ChartsService ){

    this.chartsService.getChartData();

    );
}

AsВы можете видеть, что я просто застрял при планировании границ Observable и подписчика.Я знаю, что это базовые вещи, но они просто не дают о себе знать. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 21 июня 2018

Итак, я разработал ответ, но забыл опубликовать его.

app.component.html 

...
<div *ngIf="chartsBoolean">
    <charts-component-selector></charts-component-selector>
</div>
...

app.service.ts 

    query(): Observable<HttpResponse<any[]>> {
            return this.http.get<any[]>(this.resourceUrl, { params: options, observe: 'response' })
                .map((res: HttpResponse<any[]>) => this.convertArrayResponse(res));
    }

app.component.ts 

    loadCharts(){
            this.chartsBoolean = false;
            this.AppService.query().subscribe(
                (res: HttpResponse < string[] > ) => this.onSuccess(res.body),
                (res: HttpErrorResponse) => this.onError(res.message)
            );
    }

    private onSuccess(data){
        this.chartsService.setChartData(data);
        this.chartsBoolean = true;
    }

ИзменяяЕсли для chartsBoolean установлено значение «true», то после установки необходимых значений в ChartsService эти значения доступны при построении для ChartsComponent.OnSuccess может потребоваться время для запуска с данными из базы данных, и ChartsComponent никогда не создается, пока не получит доступ к этим данным.

...