Question

我从angular2开始。我尝试从php脚本中获取数据。

我在棱角分明的文档中跟随了这个文章。但我最近得到了这个令人困惑的错误消息：

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

追赶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时，我可以检测到getModel()变为空。

所以在ngOnInit中，这不是空的，但稍后在getModel() this中的通话是null。

我不知道为什么会这样。我希望你有一个想法或任何建议。

Answer 1

我认为您可以使用Elvis运算符：

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

因为model属性是异步加载的，而且在最初评估model.name时不可用...

ViewWrappedExcepetion错误为null，然后不为null

1 个答案: