Question

我在typescript中创建了一个Angular函数，该函数向JSON数据发出http请求，并将其保存到对象中。数据的连接和解析工作正常，但我必须两次单击关联的按钮才能使该功能正常工作。

功能代码：

\w\s?

最初，当我单击相应的按钮以触发功能时，我看到：

但是一旦再次单击该按钮，似乎一切正常。

我认为这与使用的数据类型有关，但是我尝试使用一种数据结构，该结构将允许我保存为GET请求返回的所有元素，以便随后test: any; callData(){ this.http.get('http://127.0.0.1:8000/api/?keyword=the&source=1&format=json') .subscribe(data => {this.test = data}); //.subscribe(data => {this.new_test.push(data)}); for (let i of this.test){ console.log(i['id'], i['title'], i['description']) } }现在所有不同的元素。

Answer 1

for loop在订阅之外，因此即使在通过subscription获得数据之前，它也会按顺序执行，这就是为什么它在第一次和第二次数据可用时都会给出错误。 / p>

只有数据可用时，您才需要进行数据操作。将data分配给this.test

之后，简单地将循环放入订阅中

test: any;
    callData(){
             this.http.get('http://127.0.0.1:8000/api/?keyword=the&source=1&format=json')
                .subscribe(data => 
                      {
                         this.test = data;
                         for (let i of this.test){
                          console.log(i['id'], i['title'], i['description'])
                         } 
                      });
            }

Answer 2

尝试删除for循环并改为执行console.log（this.test）。

Answer 3

尝试这样的事情：

callData(){
    this.http.get('http://127.0.0.1:8000/api/?keyword=the&source=1&format=json')
    .subscribe(data => {
        this.test = data // now test is populated
        for (let i of this.test){
            console.log(i['id'], i['title'], i['description'])
        }
    });
    // test here is undefined because the request is not launched
}

Answer 4

由于您是异步获取数据的，因此即使在获取数据之前，循环也要开始工作，因此屏幕上不会打印任何内容。

下次单击按钮时，http请求已完成，它将在控制台上打印数据。

   test: any;
        callData(){
                 this.http.get('http://127.0.0.1:8000/api/?keyword=the&source=1&format=json')
                    .subscribe(data => {this.test = data});
                    //.subscribe(data => {this.new_test.push(data)

                    for (let i of this.test){
                        console.log(i['id'], i['title'], i['description'])
                    }

                  });


                }

无法从httpclient json请求角度正确读取数据

4 个答案: