如何在html上显示来自角度4响应的http获取

Question

我正在尝试使用 Angular 4 中的 http get 方法从表中获取数据。如何在 html 页面上显示它？

getData(){
  //return this.data;
  return this.http.get("http://localhost:8080/SpringRestExample/get/filedata")
                  .map((response: Response) => 
                      {
                           return response.json();
                   });
}

组件.ts

getPosts(): void {
console.log("In"+this.service.getData());
this.service.getData()
    .subscribe(
        resultArray => this.data = resultArray,
        error => console.log("Error :: " + error)
    )
    console.log(this.data);
}

这里我的数据显示未定义，但 get 方法显示返回了对象。我无法获取它并在 html 上显示它？

Answer 1

将您的控制台日志方法放在订阅方法中。

Answer 2

您在更新前访问this.data。这样做：

getPosts(): void {
    console.log("In"+this.service.getData());
    this.service.getData()
        .subscribe(resultArray => {
                this.data = resultArray;
                console.log(this.data);
                // update data source
                this.dataSource.data = this.data;
            },
            error => console.log("Error :: " + error)
        );
}