ngIfとPromiseが動作しない

Question

私はこれをかなりテストしたが、以下の理由が理解できない。問題は、@Input変数が到着し、ユーザーオブジェクトがサービスから取得された後、テンプレート内のngIfは「some random text」とユーザーオブジェクト値のどれも出力しないことです。 ngIfラインを<div *ngIf="userList">{{userList.firstName}} {{userList.lastName}}で切り換えると、userList配列にはfirstNameとlastName要素もあります。何らかの理由で、promise関数getUserでそれを行うことはできないようです。私はconsole.logで約束の応答をテストしており、間違いなくサービスからデータオブジェクトを取得しています。チュートリアルではこのようなことがルーティングで行われていることは分かっていますが、ここで間違っていることが不思議なので、何が起きているのか理解できます。

import { Component, Input } from '@angular/core'; 
import { User } from './ViewModels/UserVM'; 
import { UserList } from './userList'; 
import { UserService } from './user.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'user-form', 
    template: ` 
    <div *ngIf="user">{{user.firstName}} {{user.lastName}} some random text</div> 
    ` 
}) 

export class UserFormComponent { 
    errorMessage: string; 
    user: User; 
    _selectedUser: UserList; 
    @Input() 
    set selectedUser(selectedUser: UserList) { 
     if (selectedUser) { 
      this._selectedUser = selectedUser; 
      this.getUser(selectedUser.id); 
     } 
    } 
    get selectedUser() { return this._selectedUser; } 


    constructor(private userService: UserService) { } 

    getUser(id: number) { 
     this.userService.getUser(id).toPromise() 
      .then(user => this.user = user) 
      .catch(err => this.errorMessage = err); 
    } 

} 

----- ----- UPDATE

私はユーザーオブジェクトが完全に平坦で姓と名ではないことを忘れ判明等user.Person.firstNameに実際に

Answer 1

これは私の愚かなエラーでした。 Userオブジェクトはフラットではありません。 User.Person.firstNameなど

Answer 2

あなたは約束/コールバックで遊んでいるように、データが到着したとき、あなたがわからない、

だから、おそらくあなたは?.オペラを使用する必要があります使用しないでくださいngIf。

<div>{{user?.firstName}} {{user?.lastName}} some random text</div> 

Answer 3

変数を宣言した場所でデータを初期化すると問題が解決することがわかりました。あなたの観察可能な変更はあなたがChangeDetectorRefに見て、変化検出コストが非常に微細ではあるが、あなたの約束は、しかし、全体のコンポーネントの

import (ChangeDetectorRef) 

constructor(private ref: ChangeDetectorRef 

this.ref.detectChanges(); 

この意志detectChangesを返した後、変更を強制するためにそれを使用することをお勧めしますときより詳細に制御する必要がある場合角2付き