角度4のHTMLでデータをバインドするにはどうすればいいですか？

Question

次のレスポンスで取得しているHTMLファイルにデータをバインドするとします。私はネットワークタブで応答を得ますが、HTMLはHTMLでバインドしません。

import { Component, OnInit, Output } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 
import 'rxjs/add/operator/map'; 
 

 
import { myService } from '../myService.service'; 
 
@Component({ 
 
    selector: 'app-data-display', 
 
    templateUrl: './data-display.component.html', 
 
    styleUrls: ['./data-display.component.css'] 
 
}) 
 
export class dataDisplayComponent implements OnInit { 
 
\t dataDisplayResults:any=[]; 
 
\t Json:any = []; 
 
\t requestURL: string = ""; 
 
\t queryString:any; 
 
\t responce:any; 
 
    constructor(private myServiceVar:myService){ 
 
    \t let re = /[?&]([^=#&]+)=([^&#]*)/g; 
 
\t let match; 
 
\t let isMatch = true; 
 
\t let matches = []; 
 
\t while (isMatch) { 
 
\t  match = re.exec(window.location.href); 
 
\t  if (match !== null) { 
 
\t   matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]); 
 
\t   if (match.index === re.lastIndex) { 
 
\t    re.lastIndex++; 
 
\t   } 
 
\t  } 
 
\t  else { 
 
\t   isMatch = false; 
 
\t  } 
 
\t } 
 
\t this.queryString = matches; 
 

 
\t this.myServiceVar.getJsonConstants().subscribe(Jsons => 
 
    
 
\t \t this.myServiceVar.getURLResponce(Jsons.domain+Jsons.Url +"?user="+this.queryString["user"]).subscribe(respData => 
 
\t \t \t this.dataDisplayResults = respData \t \t \t 
 
\t \t) 
 
    
 
\t) 
 
    } 
 

 
    ngOnInit(){ 
 
    \t 
 

 
    } 
 

 
}

<div *ngIf="dataDisplayResults.length">{{dataDisplayResults.date}}</div>

Answer 1

未定義使用 ?のプロパティを読み取ることができませんと言って「長さ」私にエラーを与えることは長さエラーを回避します。 dataDisplayResultsが未定義の場合、lengthプロパティにはアクセスしません。

<div *ngIf="dataDisplayResults?.length > 0">{{dataDisplayResults.date}}</div> 

Answer 2

大会はngOnInit方法で任意のhttp呼び出しを行うことです。一般的に、コンポーネントコンストラクタで重い計算作業をすることはお勧めしません。 httpコールをコンポーネントのngOnInitメソッドに移動することをお勧めします。

しかし、あなたはまた

<div *ngIf="dataDisplayResults && dataDisplayResults.length">{{dataDisplayResults.date}}</div> 

存在と長さを確認することができますもう一つは、あなたがいない巣観察可能rxjsが呼び出す購読するべきです。あなたは、できるだけ光としてそれを維持するために、）ngOnInit（へ）、

this.myServiceVar.getJsonConstants() 
     .mergeMap(Jsons => { 
      return this.myServiceVar.getURLResponce(Jsons.domain+Jsons.Url +"?user="+this.queryString["user"]); 
     }) 
     .subscribe(respData => { 
      this.dataDisplayResults = respData   
     });