ViewWrappedExcepetionエラーがnullで、nullではない

Question

私はangular2から始まります。そして、私はPHPスクリプトからデータを取得しようとします。

私は角度の文書で宮廷をたどった。私はこのエラーが来る見当がつかない

TypeError: Cannot read property 'name' of undefined 
    at DebugAppView._View_CatchDataComponent0.detectChangesInternal (CatchDataComponent.template.js:62) 
    at DebugAppView.AppView.detectChanges (core.umd.js:9996) 
    at DebugAppView.detectChanges (core.umd.js:10084) 
    at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:10016) 
    at DebugAppView._View_CatchDataComponent_Host0.detectChangesInternal (CatchDataComponent_Host.template.js:36) 
    at DebugAppView.AppView.detectChanges (core.umd.js:9996) 
    at DebugAppView.detectChanges (core.umd.js:10084) 
    at DebugAppView.AppView.detectContentChildrenChanges (core.umd.js:10011) 
    at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:121) 
    at DebugAppView.AppView.detectChanges (core.umd.js:9996) 

：このメッセージを含む

zone.js:463 ViewWrappedException {_wrapperMessage: "Error in app/components/catch-data/catch-data.component.html:7:5", _originalException: TypeError: Cannot read property 'name' of undefined 
    at DebugAppView._View_CatchDataComponent0.de…, _originalStack: "TypeError: Cannot read property 'name' of undefine…t/node_modules/@angular/core/core.umd.js:9996:18)", _context: DebugContext, _wrapperStack: "Error: Error in app/components/catch-data/catch-da…tChangesInternal (AppComponent.template.js:121:8)"} 

：しかし、私は最近、この混乱エラーmesseageを取得します。ここに私のコードは次のとおりです。

model.service.ts

import { Injectable }  from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 

import { Model } from '../../class/model/model'; 


@Injectable() 
export class ModelService 
{ 
    constructor(private http: Http){} 
    private modelUrl = '../../server/clientFunc/getModel.php'; 

    getModel(): Promise<Model> { 
     return this.http.get(this.modelUrl).toPromise().then(response => response.json()).catch(this.handleError); 
    } 

    private handleError(error: any) { 
     console.error('An error occurred', error); 
     return Promise.reject(error.message || error); 
    } 
} 

キャッチdata.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router }   from '@angular/router-deprecated'; 

import {Model} from '../../class/model/model'; 
import {ModelService} from '../../services/model/model.service'; 

@Component({ 
    selector: 'catch-data', 
    templateUrl: 'app/components/catch-data/catch-data.component.html', 
    providers: [ModelService] 
}) 

export class CatchDataComponent implements OnInit 
{ 
    constructor(private modelService:ModelService) { 
    } 
    model:Model; 
    errorMessage:string; 
    testItem = "Test-Item"; 

    ngOnInit():any { 
     this.getModel(); 
    } 

    getModel() { 
     this.modelService.getModel() 
      .then(response => { 
       this.model = new Model(); 
       this.model.deserialize(response); 
      }) 
      .catch(error => { 
       this.errorMessage = error; 
       console.log(error); 
      }); // TODO: Display 
    } 
} 

とmodel.ts

export class Model 
{ 
    id:number; 
    name:string; 

    constructor(){ 
    } 

    deserialize(object){ 
     this.name = object.name; 
     this.id = object.id; 
    } 

} 

テンプレートルックスlike：

<h1>Search and catch data</h1> 
<h3>Model: {{testItem}}</h3> 
<div>Name: {{model.name}}</div> 

CatchDataComponentが検出された場合は、getModel()と呼ぶのでnullが返されます。

したがって、ngOnInitでは、これは後でgetModel() のコールがnullです。

私はアイデアを持っていません。これはどうして起こるのですか？ アイデアや提案がありましたら幸いです。

Answer 1

私はあなたがエルビス演算子を使用することができると思う：

<div>Name: {{model?.name}}</div> 

modelプロパティがロードされているので、model.nameが最初に評価されたときに非同期では使用できません...