javascript - (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() 方法不等待数据到达，我猜您已经知道这一点。您面临的问题是因为您在错误的位置 .subscribe 到 getDataModules() 服务。您不应该订阅另一个服务中的服务(至少在这种情况下)。将 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);
    }));
  }

}