Angularjs 2 component property undefined
<p>I have been following the Angular 2 Development Guide. I ran into this problem while doing <a href="https://angular.io/docs/ts/latest/guide/router.html#!#lifecycle-hooks" rel="nofollow noreferrer">9 Routing and Navigation Milestone 3</a></p>

<p>I added a function <code>getCrisis</code> that takes one parameter <code>sn</code>. The function returns a <code>Promise&lt;Crisis&gt;</code> asynchronously. </p>

<p><strong>crisis.service.ts</strong></p>

<pre><code>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 =&gt; cries.filter(c =&gt; c.serialNumber === +sn)[0]);
    }
}
</code></pre>

<p><strong>crisis-form.component.ts</strong> that calls <code>getCrisis</code> on <code>ngOnInit</code></p>

<pre><code>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 =&gt; {
            if (crisis) {
                console.log(crisis) // debug output
                this.origin = new Crisis(crisis);
                this.model = crisis;
            }
            else {
                this.gotoCrisisCenter();
            }
        });
    }
</code></pre>

<p><strong>crisis-form.component.html</strong></p>

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

    &lt;button type="submit" class="btn btn-default" [disabled]="!crisisForm.form.valid"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>I got this exception when loading the <code>crisis-form component</code>. The <code>input</code> element is bound to <code>this.model.name</code>. It seems the framework found <code>this.model</code> as <code>undefined</code> for some reason. I added some console debug outputs in the <code>ngOnInit</code> function. They appear in the button of the console after the exception message. The Promise did got resolved correctly and the <code>crisis</code> object is assigned to this.model property correctly. </p>

<p>But the fact that the framework finds this.model undefined and the order of these messages appears in the console. Is it possible that when the framework evaluates the binding, this.model has not been assigned yet due to the async process, which causes the exception? Then, the <code>Promise</code> is resolved and assigned to <code>this.model</code>, and the debug messages are printed to the console. </p>

<p>The <a href="http://plnkr.co/edit/?p=preview" rel="nofollow noreferrer">live sample</a> from Angular does same thing but they dont get the exception. See their sample in <code>app/crisis-centre/crisis-detail.component.ts</code> line 37-46. </p>

<p>Any help will be appreciated. Thank you. </p>

<p><a href="https://i.stack.imgur.com/k00Ww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k00Ww.png" alt="Error"></a></p>