原因是 http.post 是一个 observable。这意味着它会在以后解决。它稍后会解决，因为它需要一些时间来连接到该工作 IP 地址、获取数据并对其进行处理。
想象一下这样的场景
let stuff = 'no';
// Equal to http.post
const resolvesLater = setTimeout(function() {
stuff = 'yes';
console.log(stuff);
},2000);
console.log(stuff);
https://jsfiddle.net/7c6kfurp/ 打开控制台并按下播放键。看看会发生什么。
你会认为控制台看起来像
是的
是的
但实际上会
不
是的
因为 setTimeout 中发生的事情稍后会发生。所以行的顺序并不能告诉你代码执行的顺序。
- 它会在开头设置 stuff = 'no'。
- 然后进入 setTimeout/http.post 函数
- 这需要一些时间。
- 同时浏览器继续
- 它会注销一些东西（仍然没有）
- 然后 setTimeout/http.post 解析
- 它会设置东西 = 是的
- 然后注销一些东西（现在可以了）
在 Angular 2 中，您订阅了 observables（就像您所做的那样），但最好将 fetch 和 subscribe 解耦。所以创建一个带有函数的服务：
fetchStuff(): Observable<Stuff[]> {
return his.http.post("WORKING_IP_ADDRESS", JSON.stringify({
"thing1": this.thing1,
"thing2": this.thing2,
}), {headers: headers}).map(res => res.json());
}
然后你订阅它并为视图分配 stuff 变量
getStuff() {
this.MyService.fetchStuff()
.subscribe(stuff => this.stuff= stuff);
}
最后在你看来
<ul class="items">
<li *ngFor="let item of stuff>
<span>{{item.property}}</span>
</li>
</ul>
Observables 意味着当对象发生变化时，所有其他依赖于它的对象都会得到通知。
所以你向你的工作 IP 发出请求，首先什么都没有发生，就像我上面解释的那样。我们正在等待服务器响应，因此您发送的数据有一些东西，然后给您发回一些东西。
为了知道某事何时发生，您订阅它。就像您订阅报纸以获取最新消息一样。当有事情发生时，您会收到通知。您想知道何时收到来自 the-working-ip 的响应。
我拆分它的原因是为了分离获取和订阅，只是为了分离关注点。你不必这样做，我可能让你更困惑。为......感到抱歉。
试试这个：
this.http.post("WORKING_IP_ADDRESS", {
"thing1": this.thing1,
"thing2": this.thing2
}, {headers: headers})
.map(res => res.json())
.subscribe(data => this.stuff = data);
这是一个关于如何创建服务的链接
https://angular.io/docs/ts/latest/guide/server-communication.html