时间戳

首页 > 解决方案 > 无法从 httpclient json 请求角度正确读取数据

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

问题描述

我在 typescript 中创建了一个 Angular 函数，它对 JSON 数据发出 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'])
                }    
            }

最初，当我单击相应的按钮触发该功能时，我看到： 在此处输入图像描述

但是一旦再次单击该按钮，似乎一切正常。在此处输入图像描述

我认为这与所使用的数据类型有关，但我正在尝试使用一种数据结构，该结构允许我保存为 GET 请求返回的所有元素，以便我console.log()现在可以使用所有不同的元素。

标签： angulartypescript

解决方案

它for loop在订阅之外，因此它甚至在数据可用之前就按顺序执行，subscription这就是为什么它第一次给出错误，下一次当数据可用时它会起作用。

只有当数据可用时，您才需要进行数据处理。简单地将您的循环分配给订阅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'])
                         } 
                      });
            }

推荐阅读