angular - View 不会第一次更新 Angular 2 RC6 中的组件属性更改

Question

我的项目中有一个组件调用一个服务来检索一些(本地存储的)JSON，它被映射到一个对象数组并返回到要显示的组件。我遇到的问题是 View 中的绑定(bind)在我第一次调用该服务时似乎没有更新，但在我第二次调用该服务时确实更新了。

组件模板:

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

组件 Controller 类:

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

我尝试过的事情:

• 更改 ChangeDetectionStrategy至 OnPush
• 制作_employees属性是一个可观察的，用 this._employees = Observable<Employee[]> 填充它并在 ngFor 语句上使用异步管道:*ngFor="let employees of _employees | async" - 同样的情况，只在第二次点击按钮时填充

谁能发现我的代码有什么问题，或者知道 RC6 的任何问题都可能导致这种行为？

Answer 1

我有同样的问题。仍然没有得到任何可靠的解决方案。使用 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()
    });
}