Question

尝试从我的本地项目中读取json文件以获得一些基本配置。

代码：

myM: any;

constructor(private http: Http) {
     this.http.get('config.json')
        .map((res: Response) => res.json())
        .subscribe(res => {
            this.parseHeaderJSON(res);
        });
}
parseHeaderJSON(res) {
    this.myM = res;
}

HTML：

<li><a href="{{myM.home_header.whatis.link_url}}" class="ripple-effect">{{myM.home_header.whatis.link_name}}</a></li>

但它始终以 undefined ..

的身份登录到控制台

如果我放置console.dir(res)而不是值赋值，那么它会打印我的对象数据，但不知道它为什么不分配给变量!!!

谁能告诉我哪里错了？

更新

json文件内容：

{
  "home_header": 
  {   
  "servicesweoffer":
      {
        "lable_name":"SERVICES WE OFFER",
        "link_url":""        
      },
  "pricing":
      {
        "lable_name":"PRICING",
        "link_url":""
      },      
  "contacutus":
      {
        "lable_name":"CONTACT US",
        "link_url":""
      }
  }
}

Answer 1

console.dir(this.myM)会打印undefined，因为

this.http.get('config.json')
    .map((res: Response) => res.json())
    .subscribe(res => this.myM = res);

是异步操作。含义http.get会在一段时间后返回一些东西（取决于网络速度和其他东西），你可以在subscribe内的http回调中对这个响应做些什么。

这就是为什么如果你在回调中放置console.dir(res)它会打印出值。因此，当您分配this.myM = res;时，您没有做错任何事情，只需要一点时间来执行此操作。

示例：

constructor(private http: Http) {
    this.http.get('config.json')
        .map((res: Response) => res.json())
        .subscribe((res) => {
             //do your operations with the response here
             this.myM = res;
             this.someRandomFunction(res);  
        );
}

someRandomFunction(res){
    console.dir(res);
}

<li><a href="{{myM?.home_header?.whatis?.link_url}}" class="ripple-effect">{{myM?.home_header?.whatis?.link_name}}</a></li>

Answer 2

此范围不适用于订阅

myM: any;

constructor(private http: Http) {
    let _self = this;
     this.http.get('config.json')
     .map((res: Response) => res.json())
     .subscribe(
        res => _self.myM = res
     );
        console.dir(this.myM);
}

angular2使用http

2 个答案: