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);
}
}
もの:
- :
*ngFor="let employees of _employees | async"
- 同じような状況では、唯一の第二ボタンを移入し
_employees
プロパティに観察、
this._employees = Observable<Employee[]>
でそれを移入し、ngForステートメントに非同期パイプを使用して作成
OnPush
に変更
をクリックすることができます誰私のコードに何か間違った点があるか、またはそのような動作につながるRC6の問題を認識していますか?
完璧な解決策ではないことに注意してコンソールにエラーが出るようにしてください? –
'changeDetection:ChangeDetectionStrategy.Default'あなたはそれをコメントして確認できますか? – micronyks
@GünterZöchbauer - いいえ、何もありません。 – dgkane