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

在getCrisis

上调用ngOnInit的

crisis-form.component.ts

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的live sample做同样的事情，但他们没有得到例外。请参阅app/crisis-centre/crisis-detail.component.ts第37-46行中的示例。

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

Answer 1

加载html时，模型仍为空。

请更新到

   if ( $_POST['HI'] )
   { 
      echo "called using the HI";
   }
   else if ( $_POST['HELLO'] )
   { 
      echo "called using the HELLO Button";
   }
   else if ( $_POST['HOLA'] )
   {  
      echo "called using the HOLA Button";
   }

Answer 2

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

在你的情况下

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

也应该这样做。

?.是elvis或safe-navigation运算符，当.之前的表达式为空时，它阻止在.之后计算表达式。

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

Answer 3

我刚刚遇到过类似的问题，虽然现在对您来说可能为时已晚，但是如果有人遇到这个问题，这对我很有用！

import { Class } from '../class';
class = <Class>{};

更多信息-Type Assertion