2017-10-05 132 views
-1

我需要從一個結構爲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); 
     }); 
    } 
} 
+0

沒有一個連貫的[mcve](*「我試過的所有」* - 究竟是什麼?)很難說,但可能是https://stackoverflow.com/q/37867020/3001761或https:/ /stackoverflow.com/q/34833358/3001761 – jonrsharpe

回答

0

要訪問組件模板中的數據,可以綁定到results變量。

您可以綁定到組件類中指定的任何屬性。在你的例子中,那將是results,caretClickedmenuOpened

我猜你正遇到的問題是http get是異步的。你需要在你的模板中處理。

例如,您可以在模板的頂部使用*ngIf = "results"以確保模板在檢索數據之前不會嘗試顯示。