角度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); 
    } 

} 

対応するサービスされています

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

ここに関連する部分である：

@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のプロバイダがどのようですテンプレートから：

<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.角度がngOnInit()前にすでにバインディングを解決http://plnkr.co/edit/DRoadzrAketh3g0dskpO?p=preview

Answer 1

：私のユースケースは、（HTTPを使用するサービスメソッドを呼び出す成分を有する）ここで提供角度サンプルと非常によく似ているように私は困惑しています。角度は、使用できるビューをバインドするときに、あなただけのcurrentUserAccountはまだnullときにエラーを回避するには、最終的に到着（とあなたがthis.userAccountService.getCurrentUserAccount().subscribe(...)

に渡されたコールバックを実行しますデータをフェッチするために、サーバへの非同期呼び出しを呼び出します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"/>