2016-11-18 17 views
0

角度2とコンポーネントのngOnInit()に新しいデータがあります。データを取得するためにサービスを呼び出しています。この私のコンポーネントngOnInit()コード角度2のデータバインドに問題がありません

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

import { Model } from './model'; 
import { CustomizeModelService } from './customize-model.service'; 

@Component({ 
    selector: 'app-customize-model', 
    templateUrl: './customize-model.component.html', 
    styleUrls: ['./customize-model.component.scss'] 
}) 
export class CustomizeModelComponent implements OnInit { 

    models = []; 

    constructor(private custModelService: CustomizeModelService) {} 

    ngOnInit() { 
     let params = JSON.stringify({ 
      "query": "{models(modelname: \"TestModel\") {_id, modelname, description}}" 
     }); 
     this.custModelService.getModelByName(params).subscribe(data => { 
      this.models.push(data); 
      console.log(this.models); 
     }); 
    } 

} 

であることがデータを返しますが、私はデータを補間するとき、私のテンプレートで、それは私がどこを作ったかわからないもの

<h3 class="title">{{models.modelname}}</h3> 

は表示されません。間違い、またはデータがテンプレートにバインドされていない理由は、どんな助けも高く評価されます。

this.custModelService.getModelByName(params).subscribe(data => { 
    this.models.push(data); 
    console.log(this.models); 
}); 
+1

テンプレート全体を表示できますか?モデルは配列なので、直接モデルプロパティはありません。代わりに* ngForを使用して配列の各モデルを反復処理する必要があります。 'this.models.push(data));'は、モデルに単一項目としてデータを追加します。 – JayChase

+0

@JayChase、質問を確認してください、私は完全なテンプレートコードを更新しました – Mujahid

+0

@JayChase * ngForについてのご意見ありがとうございます、なぜ私は最初の場所でそれを忘れて、今は動作します。ありがとう – Mujahid

答えて

0

モデルは配列なので、直接モデルプロパティはありません。代わりに* ngForを使用して配列の各モデルを反復処理する必要があります。

はまた

this.models.push(data)); 

モデルへの単一の項目としてデータを追加します。

1

を提供することができアンギュラ2では各HTTPサービスメソッドは、HTTPレスポンスのObservableあなたは以下のようにその応答に加入しなければならないので、オブジェクトを返す任意のより多くのコード*ngIfを使用して、apiからのデータがhtmlで使用できる状態になっていることを確認してください。このように<h3 *ngIf="models" class="title">{{models.modelname}}</h3>*ngIfを使用しない場合は、apiサービスの終了前にテンプレートでmodels.modelnameを使用してエラーが発生しますが、数秒後にデータが更新されると、ページが更新されます。 console.logは同じです。

+0

Observableの提案をお寄せいただきありがとうございます。Observablesにコードを変換し、@ JayChaseの* ngRepeatの提案でコードが動作しています。 – Mujahid

0

試してください。必要な、私は

TIA

関連する問題