从http获取数据到变量获取请求

问题描述：

我需要从一个结构为JSON的API获取数据。下面是一个获取数据的代码，console.log很好地打印出所有的数据。但现在我想使用字符串插值在模板文件上使用这些数据。无论如何还是在这个功能之外。所有我试图打印出来的'undefined'。从http获取数据到变量获取请求

我看了一些教程并阅读了关于它的文章，但我无法让它工作。假设我想使用dataview.component.html模板中的数据，我该怎么办？

注意：我不确定这是否重要，但dataview是应用程序组件（应用程序/数据视图）的子组件。

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 


@Component({ 
    selector: 'app-dataview', 
    templateUrl: './dataview.component.html', 
    styleUrls: ['./dataview.component.css'] 
}) 
export class DataviewComponent implements OnInit { 

    results: string[]; 
    caretClicked = false; 
    menuOpened = false; 

    constructor(private http: HttpClient) {} 

    expandData() { 
    this.caretClicked= !this.caretClicked; 
    } 

    openMenu() { 
    this.menuOpened= !this.menuOpened; 
    } 

    ngOnInit(): void { 
     // Make the HTTP request: 
     this.http.get('MY URL HERE').subscribe(data => { 
      // Read the result field from the JSON response. 
      this.results = data['results']; 
      console.log(data); 
     }); 
    } 
}

没有一个连贯的[mcve]（*“我试过的所有”* - 究竟是什么？）很难说，但可能是https://*.com/q/37867020/3001761或https：/ /*.com/q/34833358/3001761 – jonrsharpe

答

要访问组件模板中的数据，可以绑定到results变量。

您可以绑定到组件类中指定的任何属性。在你的例子中，那将是results,caretClicked和menuOpened。

我猜你正遇到的问题是http get是异步的。你需要在你的模板中处理。

例如，您可以在模板的顶部使用*ngIf = "results"以确保模板在检索数据之前不会尝试显示。

从http获取数据到变量获取请求

相关推荐