第一次在Angular 2 RC6中视图不会更新组件属性 [英] View doesn't update on component property change in Angular 2 RC6 first time

问题描述

我的项目中有一个组件，该组件调用服务以检索一些(本地存储)JSON，该JSON映射到对象数组并返回到要显示的组件.我遇到的问题是，视图中的绑定似乎在我第一次调用该服务时不会更新，但是在我第二次调用该服务时会更新.

I have a component in my project that calls a service to retrieve some (locally-stored) JSON, which is mapped to an array of objects and returned to the component to be displayed. The problem I am having is that the bindings in the view don't seem to update the first time I call the service, but do update the second time I call the service.

组件模板:

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

我尝试过的事情:

• 将ChangeDetectionStrategy更改为OnPush
• 使_employees属性成为可观察到的属性，并用this._employees = Observable<Employee[]>填充它，并在ngFor语句上使用异步管道:*ngFor="let employees of _employees | async"-相同的情况，仅在第二次单击按钮时填充

• Changing the ChangeDetectionStrategy to OnPush
• Making the _employees property an observable, populating it with this._employees = Observable<Employee[]> and using the async pipe on the ngFor statement: *ngFor="let employees of _employees | async" - same situation, only populates on second button click

有人能发现我的代码有什么问题吗，还是知道RC6的任何问题可能导致这种行为?

Can anyone spot anything wrong with my code, or are aware of any issues with RC6 that could lead to such behaviour?

推荐答案

我遇到了同样的问题.仍然没有得到任何解决方案.使用detectChanges是可行的.以下是解决方法，但请注意，这不是完美的解决方案

I had same issue. Still didn't get any solid solution. Using detectChanges works. Below is the workaround but please note that this is not the perfect solution

export class ListComponent {

_employees: Employee[];

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

}

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

}

这篇关于第一次在Angular 2 RC6中视图不会更新组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！