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

回答

相關問題