可觀察返回的訂閱方法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你把你