Angularjs 2 组件属性未定义

Question

我一直在关注 Angular 2 开发指南。我在做 9 Routing and Navigation Milestone 3 时遇到了这个问题

我添加了一个函数 getCrisis接受一个参数 sn .该函数返回 Promise<Crisis>异步地。

crisis.service.ts

import {Injectable} from 'angular2/core';
import {CRISES} from './mock-crisises';

@Injectable()
export class CrisisService {

    getCrisises() {
        return Promise.resolve(CRISES);
    }

    // the | string token is a Pipe
    getCrisis(sn: number | string) {
        return Promise.resolve(CRISES).then(cries => cries.filter(c => c.serialNumber === +sn)[0]);
    }
}

crisis-form.component.ts 调用 getCrisis在 ngOnInit

export class CrisisFormComponent implements OnInit, CanDeactivate{

    public model: Crisis;
    public origin: Crisis;

    submitted = false;
    active = true;

    constructor(
        private _service: CrisisService,
        private _dialog: DialogService,
        private _router: Router,
        private _routeParams: RouteParams
    ) { }

    ngOnInit() {
        let sn = +this._routeParams.get('sn');
        this._service.getCrisis(sn).then(crisis => {
            if (crisis) {
                console.log(crisis) // debug output
                this.origin = new Crisis(crisis);
                this.model = crisis;
            }
            else {
                this.gotoCrisisCenter();
            }
        });
    }

crisis-form.component.html

<h1>Crisis Form</h1>
<form *ngIf="active" (ngSubmit)="onSubmit()" #crisisForm="ngForm">
    {{diagnostic}}
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" required [(ngModel)]="model.name" ngControl="name" #name="ngForm">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
            Name is required
        </div>
    </div>

    <button type="submit" class="btn btn-default" [disabled]="!crisisForm.form.valid">Submit</button>
</form>

加载 crisis-form component 时出现此异常. input元素绑定(bind)到 this.model.name .似乎框架找到了this.model作为undefined因为某些原因。我在 ngOnInit 中添加了一些控制台调试输出功能。它们出现在异常消息之后的控制台按钮中。 Promise 确实得到了正确解决并且 crisis对象已正确分配给 this.model 属性。

但是框架发现 this.model undefined 并且这些消息的顺序出现在控制台中。有没有可能是框架在评估绑定(bind)的时候，由于异步进程，this.model还没有赋值，导致异常？然后，Promise已解决并分配给 this.model ，并且调试消息会打印到控制台。

live sample来自 Angular 做同样的事情，但他们没有得到异常(exception)。在 app/crisis-centre/crisis-detail.component.ts 中查看他们的样本第 37-46 行。

任何帮助将不胜感激。谢谢你。

Answer 1

当加载 html 时，模型仍然为空。

请更新到

<div class="form-group" *ngIf="model">
        <label for="name">Name</label>
        <input type="text" class="form-control" required [(ngModel)]="model.name" ngControl="name" #name="ngForm">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
            Name is required
        </div>
    </div>