subscribe方法的可观察返回未定义的值

Question

我在我的应用程序中安装了一个名为“angular2-grid”的角度2库。该库位于node_modules文件夹下。

我已经建立了如下服务：

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

 import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent} from 'angular2-grid';


 @Injectable()
 export class WidgetService {

private _widgetUrl = './assets/gridConfig.json';

constructor(private _http: Http) { }

getWidgets(): Observable<NgGridConfig> {

    return this._http.get(this._widgetUrl)
        .map(res=>res.json())
        .do(data => console.log("All: " + JSON.stringify(data)))
        .catch(this.handleError);

}
  // some other code here

NgGridConfig是一个如下界面

export interface NgGridConfig {
margins?: number[];
draggable?: boolean;
resizable?: boolean;
max_cols?: number;
max_rows?: number;
visible_cols?: number;
visible_rows?: number;
min_cols?: number;
min_rows?: number;
col_width?: number;
row_height?: number;
cascade?: string;
min_width?: number;
min_height?: number;
fix_to_grid?: boolean;
auto_style?: boolean;
auto_resize?: boolean;
maintain_ratio?: boolean;
prefer_new?: boolean;
zoom_on_drag?: boolean;
limit_to_screen?: boolean;
}

对于其中一些属性，我在gridCongig.json文件中放了一些值

在我的组件中，我有以下代码：

import { Component, ViewEncapsulation,OnInit } from '@angular/core';
import {NgGrid, NgGridItem, NgGridConfig, NgGridItemConfig, NgGridItemEvent}   from 'angular2-grid';
import {IBox} from './grid'
import {WidgetService} from './grid.service'

@Component({
 templateUrl: './grid.component.html',
 styleUrls: ['./grid.component.css'],
 })


export class GridComponentDemo {

private boxes: Array<IBox> = [];
private rgb: string = '#efefef';
private curNum;
imageWidth: number= 50;
imageMargin: number=2;
widgets:  Array<IWidgets> = [];
errorMessage: string;
private itemPositions: Array<any> = [];
ngGridConfig : NgGridConfig;

constructor (private _widgetService: WidgetService) {



  }

ngOnInit(): void {

 this._widgetService.getWidgets()
                      .subscribe(ngGridConfig=>this.ngGridConfig=ngGridConfig,
                      error => this.errorMessage = <any>error);


 const dashconf = this._generateDefaultDashConfig(); 

    for (var i = 0; i < dashconf.length; i++) { //6
        const conf = dashconf[i]; 
        conf.payload = 1 + i;
        this.boxes[i] = { id: i + 1, config: conf,name: "widget " + conf.payload + " : "};
    }

    this.curNum = dashconf.length + 1; 


 }

现在，当我运行此应用程序时，我进入了控制台

  

全部：   [{ “边距”：[5]， “拖动”：真， “调整大小”：真 “MAX_COLS”：0 “MAX_ROWS”：0 “visible_cols”：0 “visible_rows”：0 “min_cols”： 1， “min_rows”：1， “col_width”：2 “row_height”：2 “级联”： “上”， “MIN_WIDTH”：50， “MIN_HEIGHT”：50， “fix_to_grid”：假 “auto_style”：真， “auto_resize”：假 “maintain_ratio”：假 “prefer_new”：假 “zoom_on_drag”：假 “limit_to_screen”：真}]

这意味着调用了服务并且正确调用和映射了json文件，因为do方法提供了所需的输出。

我认为问题出在我的订阅上，因为类型ngGridConfig的属性NgGridConfig仍为空。我意识到，在我输入console.log(this.ngGridConfig.min_rows)后，结果为undefined。

我需要一些帮助我的属性ngGridConfig如何获取服务中映射的所有值？

Answer 1

我认为_generateDefaultDashConfig方法使用this.ngGridConfig所以你必须等到getWidgets结算：

export class GridComponentDemo {

private boxes: Array<IBox> = [];
private rgb: string = '#efefef';
private curNum;
imageWidth: number= 50;
imageMargin: number=2;
widgets:  Array<IWidgets> = [];
errorMessage: string;
private itemPositions: Array<any> = [];
ngGridConfig : NgGridConfig;

constructor (private _widgetService: WidgetService) {



  }

ngOnInit(): void {

    this._widgetService.getWidgets()
                      .subscribe(ngGridConfig=>{
                         this.ngGridConfig=ngGridConfig;
                          this.doConfig()
                          },
                      error => this.errorMessage = <any>error);
   }
}  

doConfig(){
     const dashconf = this._generateDefaultDashConfig(); 

    for (var i = 0; i < dashconf.length; i++) { //6
        const conf = dashconf[i]; 
        conf.payload = 1 + i;
        this.boxes[i] = { id: i + 1, config: conf,name: "widget " + conf.payload + " : "};
    }

    this.curNum = dashconf.length + 1; 


}