ViewWrappedExcepetion error is null, then not null

Question

Я начинаю с angular2. И я пытаюсь получить данные из php-скрипта.

Я следовал за турели в угловых документах. Но я недавно эту запутанную messeage ошибки:

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

, содержащий это сообщение:

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) 

Я понятия не имею, где эта ошибка происходит из. Вот мой код:

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

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

} 

шаблон, ищет например:

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

Так как я мог обнаружить, CatchDataComponent получает null, как я звоню getModel().

Так ngOnInit это не нулевой, но позже в getModel() вызов this является null.

У меня нет идеи, почему это происходит. Надеюсь, у вас есть идея или любые предложения.

Answer 1

Я думаю, что вы могли бы использовать оператор Elvis:

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

model, потому что свойство загружается асинхронно и не доступен, когда model.name оценивается в первую ...