Question

所以我有一个名为stuff的变量，它被声明为stuff:any，我想用我得到的数据填充它：

this.http.post("WORKING_IP_ADDRESS", JSON.stringify(
      {"thing1": this.thing1,
      "thing2": this.thing2,
    }), {headers: headers}).map(
      res => res.json()).subscribe(
        data => {
          (JSON.stringify(data));
        })

当我在最后一个alert()上运行JSON.stringify(data));方法时，我得到了我想要的数据，但是当我尝试通过{{stuff变量设置它时，它等于this.stuff = JSON.stringify(data));变量1}}，它不起作用。我是Angular的新手，所以我知道我可能做错了什么。任何人都知道我需要做什么才能将最终JSON.stringify(data)放入我的stuff变量？

Answer 1

原因是http.post是一个可观察的。这意味着它将在以后解决。它会稍后解决，因为它需要一些时间来连接到工作的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中发生的事情稍后发生。因此，行的顺序不会告诉您代码执行的顺序。

它会设置东西=＆＃39; no＆＃39;在开头。
然后它将进入setTimeout / http.post函数
那需要一些时间。
同时浏览器继续
它注销了东西（仍然没有）
然后setTimeout / http.post解析
它会设置东西=是
然后注销东西（现在是的）

在角度2中，您订阅了observables（就像您一样），但最好将取消和订阅分离。因此，使用函数创建服务：

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

在Angular JS中使用令人困惑的方法设置变量

1 个答案: