http取得リクエストから変数にデータを取得する

Question

JSONとして構造化されたAPIからデータを取得する必要があります。 以下はデータを取得するコードで、console.logはすべてのデータを素早く出力します。しかし今、私は文字列補間を使ってそのデータをテンプレートファイルで使いたいと思っています。とにかくその機能の外に。私はちょうど'未定義'を印刷しようとしました。

私はいくつかのチュートリアルを見て、それに関する記事を読んでいましたが、うまく動作しませんでした。 dataview.component.htmlテンプレートのデータを使用したいとしたら、どうすればよいですか？

NB：重要なことはわかりませんが、dataviewはappコンポーネントの子コンポーネントです（app/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); 
     }); 
    } 
} 

Answer 1

コンポーネントのテンプレートからデータにアクセスするには、results変数にバインドします。

コンポーネントクラスで指定されたプロパティにバインドできます。あなたの例では、results、caretClickedおよびmenuOpenedとなります。

あなたが推測している問題は、http getが非同期であるということです。テンプレートでそれを処理する必要があります。

たとえば、テンプレートの上部に*ngIf = "results"を使用して、データが取得されるまでテンプレートが表示されないようにすることができます。