2016-09-13 16 views
4

プロジェクトに、オブジェクトの配列にマップされた(ローカルに保存された)JSONを取得するためのサービスを呼び出すコンポーネントがあります。表示されるコンポーネント私が抱えている問題は、ビューのバインディングが最初にサービスを呼び出すときに更新されないように見えるが、サービスを呼び出すときには更新を更新するということです。Angular 2 RC6のコンポーネントプロパティの変更で初めてビューが更新されない

コンポーネントテンプレート:

@Component({ 
    selector: 'list-component', 
    template: ` 
     <button type="button" (click)="getListItems()">Get List</button> 
     <div> 
      <table> 
       <tr> 
        <th> 
         ID 
        </th> 
        <th> 
         Name 
        </th> 
        <th> 
         Job Title 
        </th> 
       </tr> 
       <tr *ngFor="let employee of _employees"> 
        <td> 
         {{employee.id}} 
        </td> 
        <td> 
         {{employee.name}} 
        </td> 
        <td> 
         {{employee.jobTitle}} 
        </td> 
       </tr> 
      </table> 
     </div> 
    `, 
    changeDetection: ChangeDetectionStrategy.Default 
}) 

コンポーネントコントローラクラス:

export class ListComponent { 

    _employees: Employee[]; 

    constructor(
     private employeeService: EmployeeService 
    ) { 

    } 

    getListItems() { 
     this.employeeService.loadEmployees().subscribe(res => { 
      this._employees = res; 
     }); 
    } 
} 

とサービス:私が試した

@Injectable() 
export class EmployeeService { 

    constructor(
     private http: Http 
    ) { } 

    loadEmployees(): Observable<Employee[]> { 
     return this.http.get('employees.json') 
     .map(res => <Employee[]>res.json().Employees); 
    } 
} 

もの:

    _employeesプロパティに観察、 this._employees = Observable<Employee[]>でそれを移入し、ngForステートメントに非同期パイプを使用して作成
  • OnPushに変更
  • *ngFor="let employees of _employees | async" - 同じような状況では、唯一の第二ボタンを移入し

をクリックすることができます誰私のコードに何か間違った点があるか、またはそのような動作につながるRC6の問題を認識していますか?

+0

完璧な解決策ではないことに注意してコンソールにエラーが出るようにしてください? –

+0

'changeDetection:ChangeDetectionStrategy.Default'あなたはそれをコメントして確認できますか? – micronyks

+0

@GünterZöchbauer - いいえ、何もありません。 – dgkane

答えて

2

私は同じ問題がありました。それでも固い解決策は得られませんでした。 detectChangesを使用してください。以下は、回避策ですが、これは

export class ListComponent { 

_employees: Employee[]; 

constructor(
    private employeeService: EmployeeService, private chRef: ChangeDetectorRef 
) { 

} 

getListItems() { 
    this.employeeService.loadEmployees().subscribe(res => { 
     this._employees = res; 
     this.chRef.detectChanges() 
    }); 
} 

}

関連する問題