Angularjs 2组件属性undefined

我一直在关注Angular 2开发指南。我碰到这个问题，一边做9 Routing and Navigation Milestone 3 Angularjs 2组件属性undefined

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

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

来源

2016-02-18 Frank Liu

当负荷的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>

来源

2016-02-18 15:34:37

感谢您的回答。我错过了示例html模板中的'* ngIf'指令。 –

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

在你的情况

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

应该做的一样好。

?.是elvis或安全导航运算符，它可以防止在.之前的表达式为.之后评估表达式。

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

来源

2016-02-18 15:39:58

你能检查一下吗？ https://github.com/angular/material2/issues/1073 –

@Gunter elvis操作符与[（ngModel）]一起工作吗？我正在尝试做同样的事情，但会引发错误。我所做的工作是[ngModel] =“customer.guestType？.guest_type”（ngModelChange）=“customer.guestType = $ event” –

@MateenKadwaikar感谢您的提示。这不应该工作。你是对的，当使用'？'时，绑定需要被分割。 –

Angularjs 2组件属性undefined

回答

相关问题