Question

我正在研究Angular 2，我的后端是NodeJs。我只是按照教程连接到服务器，但它不起作用。这是我在app.component.ts中的代码：

this.http.get<Contributor[]>('http://localhost:3000/message/').subscribe(data => {
            // data is now an instance of type ItemsResponse, so you can do this:
            this.contributors = data;
            console.log(this.contributors);
        });
        console.log(this.contributors);

第一个“this.contributors”显示数据，但第二个未定义。有什么可以帮助我吗？非常感谢！

Answer 1

这是因为javascript是异步的。在发送HTTP请求之后，angular不会等到事件订阅。它只是继续执行。这就是为什么第二个console.log(this.contributors);首先执行而且未定义的原因。订阅该事件后，它会在订阅方法中显示console.log数据

Answer 2

您需要使用map()，因为它会为调用者返回已创建的Observable以进行订阅。

所以你可以这样做：

getData():any {
return this.http.get<Contributor[]>('http://localhost:3000/message/').map( 
    (response) => {
      this.contributors = response;
      console.log(this.contributors);
      return JSON.stringify(this.contributors);
    }
}

然后在你的组件下标中，如：

this.getData().subscribe(data => {/* here you can access data */ 
   console.log(data);
});

确保导入地图运算符：

import 'rxjs/add/operator/map'

angular 2无法连接到服务器

2 个答案: