(Angular2) JSON数据(http.get())未定义，组件中数据未更新

Question

我的 http-data.service 在组件模板中接受 json 输出。最初，控制台显示前几个调用给定了undefined，后面的调用已经在取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() 方法不等待数据到达，我猜你已经知道了。您面临的问题是，您在错误的位置将.subscribe 提供给getDataModules() 服务。您不应该 subscribe 到另一个服务中的服务（至少在这种情况下）。将subscribe 方法移动到left-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);
    }));
  }

}