可观察返回的订阅方法undefined值

Question

我已在我的应用程序中安装了一个角度为2的库，名为“angular2-grid”。该库位于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”：假” “}}

这意味着该服务被调用和JSON文件被调用和正确映射，因为方法给出所需的输出。

我认为这是我的订阅问题，因为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; 


} 

其中di你把你