Problem mit eckigen 2-Komponenten, die im Beobachtungszeitraum nicht beobachtbar sind

Question

Ich habe eine Komponente, die Daten von einem Dienst abrufen soll.

Hier ist meine Komponente:

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

} 

Hier ist der entsprechende Service:

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

Hier ist, wie der Anbieter für die 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] 
    })]); 

Hier ist der relevante Teil ist aus der Vorlage:

<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"/> 

Das Problem ist, dass die Vorlage von der Zeit gemacht wird, currentUserAccount noch undefined in ngModel ist ...

Kann jemand bitte helfen?

P.S. Ich bin als meine Anwendungsfall verwirrt (eine Komponente, die eine Service-Methode aufrufen, die HTTP verwendet) ist sehr ähnlich zu der Winkelprobe hier vorgesehen: http://plnkr.co/edit/DRoadzrAketh3g0dskpO?p=preview

Answer 1

Angular löst Bindungen bereits vor ngOnInit(). Sie einfach in den Asynchron-Aufruf an den Server aufrufen, um die Daten zu holen, die schließlich ankommen (und führen Sie den Rückruf Sie this.userAccountService.getCurrentUserAccount().subscribe(...) geben

Um einen Fehler zu vermeiden, wenn currentUserAccount noch null ist, wenn Winkel die Ansicht bindet man die verwenden können Elvis oder sicherer Navigationsoperator ?. für Parent-to-View-Bindung [], aber nicht für Event-to-Parent-Bindung () Dies wird nicht unterstützt (es gibt Diskussionen, um Unterstützung dafür hinzuzufügen) Sie können jedoch diesen ausführlicheren Stil verwenden:

<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"/>