（Angular2）JSON数据（http.get（））未定义，并且组件中的数据未更新

Question

我的http-data.service接受json用于组件模板中的输出。 最初，控制台显示前几个调用是未定义的，随后的调用已经使用json，但是如果您检查组件，则组件显示将数据输出到组件的方法仅被调用一次，然后由于数据尚未到达，因此它写入undefined，但是在到达json之后不会更新。 帮助请理解为什么？ 谢谢

我的http-data.service ：

            import {Injectable} from '@angular/core';
            import {Http} from '@angular/http';
            import {Response} from '@angular/http';
            import {Observable} from 'rxjs/Observable';
            import 'rxjs/add/operator/map';

            @Injectable()
            export class HttpService{
                constructor(private http: Http) {}

                getDataOrganizations(): Observable<any[]>{
                    return this.http.get('http://localhost:3010/data')
                        .map((resp:Response)=>{
                            let dataOrganizations = resp.json().organization;
                            return dataOrganizations;
                        });
                }

                getDataModules(): Observable<any[]> {       
                    return this.http.get('http://localhost:3010/data')
                        .map((resp: Response)=> {
                            let dataModules = resp.json().modules;
                            return dataModules;
                        });
                }

                getDataPresets(): Observable<any[]> {       
                    return this.http.get('http://localhost:3010/data')
                        .map((resp: Response)=> {
                            let dataPresets = resp.json().presets;
                            return dataPresets;
                        });
                }

                getDataModuleItems(): Observable<any[]> {       
                    return this.http.get('http://localhost:3010/data')
                        .map((resp: Response)=> {
                            let dataModuleItems = resp.json().module_items;
                            return dataModuleItems;
                        });
                }
            }

我的全data-all.service

import { Injectable, EventEmitter } from '@angular/core';
    import {Response} from '@angular/http';
    import { ModuleModel } from './model-module';
    import { ModuleItemsModel } from './model-module-items';
    import data from '../data/data-all';
    import { PriceService } from './price.service';
    import { HttpService } from './http-data.service';

    @Injectable()

    export class ModuleDataService {

        constructor(private priceService: PriceService, private httpService: HttpService){
            this.dataMinMaxSum = {minSum: 0, maxSum: 0}
        }

        private currentPopupView: EventEmitter<any> = new EventEmitter<any>();

        private dataModules: ModuleModel[] = this.getDataModules();
        private dataMinMaxSum: {};
        private dataCalculateVariationOrg: any[];
        private dataChangeExecutor: any[];
        subscribe(generatorOrNext?: any, error?: any, complete?: any) {
            this.currentPopupView.subscribe(generatorOrNext, error, complete);
        }

        calculte(){
            return this.priceService.getDataPrice();
        }

        getDataModules(){
            this.httpService.getDataModules().subscribe(((modules)=>{this.dataModules = modules; console.log(this.dataModules);}));
                console.log('dataModules');
                console.log(this.dataModules);
                return this.dataModules;
        }
      ---------------------------------------------------------------------------
    }

我的left-block.component

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

    @Component({
        moduleId: module.id,
        selector: 'modules-left-block',
        templateUrl: './modules-left-block.html',
        styleUrls: ['modules-left-block.css']
    })
    export class ModuleLeft implements OnInit{

        modules: ModuleModel[];

        constructor(private modulesAll: ModuleDataService){}


        ngOnInit(){
            this.modules = this.modulesAll.getDataModules();
            console.log("view");
            console.log(this.modulesAll.getDataModules());
        }

        onToggle(module: any){
            this.modulesAll.toggleModules(module);
        }
    }

我的left-block.component.html

<div class="modules-all">
        <div class="modules-all-title">Все модули</div>
        <div class="module-item" *ngFor="let module of modules" [ngClass]="{ 'active': module.completed }" (click)="onToggle(module)">{{module?.title}}</div>

    </div>

在组件中，this.modulesAll.getDataModules（）方法是为什么只执行一次而不更新（在console => undefined中写入）的原因，如果有什么想法，请写，谢谢。

Answer 1

此行为是由于.subscribe()方法不等待数据到达而造成的，我想您已经知道了这一点。 您面临的问题是，因为您在wron位置有.subscribe到getDataModules()服务。 您不应该在其他服务中subscribe服务（在这种情况下，请先保留）。 移动subscribe方法左block.component，它应该工作。

 getDataModules() { this.httpService.getDataModules().subscribe(((modules) => { this.dataModules = modules; console.log(this.dataModules); })); console.log('dataModules'); console.log(this.dataModules); return this.dataModules; } 

它看起来应该像这样：

 @Component({ moduleId: module.id, selector: 'modules-left-block', templateUrl: './modules-left-block.html', styleUrls: ['modules-left-block.css'] }) export class ModuleLeft implements OnInit { modules: ModuleModel[] = new ModuleModel(); constructor(private modulesAll: ModuleDataService, private httpService: HttpService) {} ngOnInit() { this.getDataModles(); //this.modules = this.modulesAll.getDataModules(); console.log("view"); //console.log(this.modulesAll.getDataModules()); } onToggle(module: any) { this.modulesAll.toggleModules(module); } getDataModules(): void { this.httpService.getDataModules().subscribe(((modules) => { this.modules = modules; console.log(this.dataModules); })); } }