問題與角2組件不訂閱服務在適當的時間觀察

Question

我有一個組件，應該從服務中檢索數據。

這裏是我的組件：

@Component({ 
    templateUrl: 'app/dashboard/useraccount/firstname/useraccount-firstname.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    pipes: [TranslatePipe] 
}) 
export class UserAccountFirstNameComponent implements OnInit { 

    currentUserAccount:Object; 
    errorMessage:string; 

    constructor(private userAccountService:UserAccountService) { 
    } 

    ngOnInit() { 
     this.userAccountService.getCurrentUserAccount() 
      .subscribe(
       param=> this.currentUserAccount = param, 
       error => this.errorMessage = <any>error 
      ); 
    } 

    updateFirstName() { 
     this.userAccountService.updateFirstName(this.currentUserAccount); 
    } 

} 

下面是相應的服務：

@Injectable() 
export class UserAccountService { 

    constructor(private http:Http) { 
    } 

    getCurrentUserAccount():Observable<Object> { 
     return this.http.get('/api/useraccount') 
      .map(this.mapUserAccount) 
      .catch(this.handleError); 
    } 

    updateFirstName(currentUserAccount) { 
     this.http.patch('/api/useraccount/firstname/' + currentUserAccount.firstName, null); 
    } 

    private mapUserAccount(res:Response) { 
     console.log(res.json()); 
     return res.json(); 
    } 

    private handleError(error:any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg = error.message || 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 

下面是UserAccountService提供商如何：

bootstrap(MainComponent, [ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    TRANSLATE_PROVIDERS, 
    SessionService, 
    UserAccountService, 
    TranslateService, 
    provide(RequestOptions, {useClass: ApplicationRequestOptions}), 
    provide(LocationStrategy, { useClass: HashLocationStrategy }), 
    provide(TranslateLoader, { 
     useFactory: (http:Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), 
     deps: [Http] 
    })]); 

下面是相關的部分來自模板：

<input type="text" 
     ngControl="firstName" 
     #firstName="ngForm" 
     required 
     minlength="2" 
     maxlength="35" 
     pattern_="FIRST_NAME_PATTERN" 
     [(ngModel)]="currentUserAccount.firstName" 
     placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}" 
     class="form-control"/> 

問題是由模板被渲染的時候，currentUserAccount仍處於ngModel undefined ...

任何人都可以請幫助？

P.S.我困惑的是我的使用情況（具有分量調用使用HTTP服務方法）非常相似，這裏提供的角度樣本：http://plnkr.co/edit/DRoadzrAketh3g0dskpO?p=preview

Answer 1

角ngOnInit()之前就已經解決了綁定。你，你只是調用異步調用服務器獲取數據，這將最終到達（並執行你傳遞給this.userAccountService.getCurrentUserAccount().subscribe(...)

回調爲了避免一個錯誤，當currentUserAccount仍然null當角結合你可以使用視圖Elvis或安全導航運算符?.用於父視圖綁定[]但不適用於事件到父項綁定()這不支持（有討論爲此添加支持）您可以使用以下更詳細的樣式：

<input type="text" 
     ngControl="firstName" 
     #firstName="ngForm" 
     required 
     minlength="2" 
     maxlength="35" 
     pattern_="FIRST_NAME_PATTERN" 
     [ngModel]="currentUserAccount?.firstName" 
     (ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null" 
     placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}" 
     class="form-control"/>