Angularjs 2组件属性未定义

Question

我一直在关注Angular 2开发指南.我在做9路由和导航里程碑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]);
    }
}

危机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();
            }
        });
    }

危机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元素必然会被绑定this.model.name.this.model由于undefined某种原因,似乎找到了框架.我在ngOnInit函数中添加了一些控制台调试输出.它们在异常消息之后出现在控制台的按钮中.Promise确实已正确解析,并且该crisis对象已正确分配给this.model属性.

但是框架发现this.model未定义并且这些消息的顺序出现在控制台中这一事实.是否有可能当框架评估绑定时,由于异步进程导致异常,还没有分配this.model？然后,Promise解析并分配this.model,并将调试消息打印到控制台.

来自Angular 的实时样本做同样的事情,但他们没有得到例外.请参阅app/crisis-centre/crisis-detail.component.ts第37-46行的样本.

任何帮助将不胜感激.谢谢.

Answer 1

加载html时,模型仍然为null.

请更新到

<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>

Answer 2

@WangSteven有一个很好的解决方案.

在你的情况下

[ngModel]="model?.name" (ngModelChange)="model ? model.name = $event : null"

也应该这样做.

?.是elvis或安全导航操作符,它阻止在.之前的表达式.为null 之后计算表达式.

当Angular在模型实际具有值之前尝试将模型绑定到视图时会发生这种情况.