Angular2 Observable HTTP Data未填充

我对Angular2相当陌生，并且想要从JSON文件加载数据。我读了AngularIO文章并做了教程，但我仍然需要一些帮助。我将“获取数据”分解为一个加载数据和组件的apiService，它从apiService获取数据。Angular2 Observable HTTP Data未填充

因为这个问题比较简单，所以我想直接将数据加载到没有apiService的组件。

这是成分：

export class StatusComponent implements OnInit { 

    private status = {}; 
    private error: string; 

    constructor(private router: Router, private variables: Variables, private apiService: ApiService, private http: Http) { 
     if (!this.variables.getIsLoggedIn()) { 
      this.router.navigate(['login']); 
     } 
    } 

    ngOnInit() { 
     this.getStatus(); 
    } 

    getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    } 
}

这是JSON：

{ 
    "status": { 
    "timercount": "0", 
    "reccount": "0" 
    } 
}

在组件中，getStatus()被正确加载，经过没有发生错误，但变量i填status没有填满。 getStatus()之后的变量仍然是{}。此外，console.log(JSON.stringify(this.status));的输出是{}。

我希望有人能帮助我解决它！非常感谢！

来源

2016-10-25 Junias

这是因为在http调用完成后执行console.log(JSON.stringify(this.status));。请记住，所有http调用都是异步方法。试试这个：

getStatus() { 
    this.http.get('../app/apiFiles/status.json') 
    .map((res:Response) => res.json()) 
    .subscribe(
    data => { this.status = data}, 
    err => console.error(err), 
    () => console.log(this.status); 
); 
}

你会看到因为经过HTTP调用表被成功完成() => console.log(this.status);执行，这将打印结果。

来源

2016-10-25 13:09:44

谢谢，但没有，这不是解决办法：/ – Junias

解决方案是使用'this.status = data.status'，然后加载数据...;）但非常感谢！ – Junias

正确的解决方法是这样的：

getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data.status}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    }

所以，你必须使用data.status，因为JSON文件以“身份”;）

来源

2016-10-25 13:31:34 Junias

Angular2 Observable HTTP Data未填充

回答

相关问题