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

Question

我在我的应用程序中安装了一个名为“angular2-grid”的 angular 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; 


 }

现在，当我运行这个应用程序时，我在控制台上得到了

全部： [{"margins":[5],"draggable":true,"resizable":true,"max_cols":0,"max_rows":0,"visible_cols":0,"visible_rows":0,"min_cols": 1,"min_rows":1,"col_width":2,"row_height":2,"cascade":"up","min_width":50,"min_height":50,"fix_to_grid":false,"auto_style": true,"auto_resize":false,"maintain_ratio":false,"prefer_new":false,"zoom_on_drag":false,"limit_to_screen":true}]

这意味着调用服务并正确调用和映射 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; 


}