각도 2의 데이터 바인딩 문제가 없습니다.

Question

저는 앵글 2와 컴포넌트의 ngOnInit()에 새로운 점이 있습니다. 데이터를 얻기 위해 서비스를 호출하고 있습니다. 이 ngOnInit() 코드

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); 
}); 

Answer 1

모델은 배열이므로 직접 모델 속성을 갖지 않습니다. 대신 * ngFor를 사용하여 배열의 각 모델을 반복해야합니다.

또한

this.models.push(data)); 

모델에 하나의 항목으로 데이터를 추가합니다.

Answer 2

각 HTTP 서비스 방법은 HTTP 응답의 Observable 당신이 아래의 응답을 가입해야하므로 개체를 반환 *ngIf을 사용하여 API에서 가져온 데이터가 html로 사용할 준비가되었는지 확인하십시오. 이 <h3 *ngIf="models" class="title">{{models.modelname}}</h3>처럼 *ngIf 없이는 API 서비스 완료 전에 템플릿에 models.modelname을 사용하면 오류가 발생하지만 몇 초 후에 페이지를 새로 고침하면 데이터가 표시됩니다. console.log는 동일합니다.

Answer 3

보십시오 : 더 코드 내가 TIA

를 제공 할 수 있습니다, 필요한

각도 2에서