视图不会首次更新Angular 2 RC6中的组件属性更改

发布时间：2020-12-17 07:10:42 所属栏目：安全来源：网络整理

导读：我的项目中有一个组件调用一个服务来检索一些(本地存储的) JSON,它被映射到一个对象数组并返回给要显示的组件.我遇到的问题是视图中的绑定似乎在我第一次调用服务时没有更新,但是第二次调用服务时会更新. 组件模板： @Component({ selector: 'list-component

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

组件模板：

@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 =“让_employees | async的员工” – 相同的情况,只在第二个按钮点击时填充

任何人都可以发现我的代码有任何问题,或者是否知道RC6可能导致此类行为的任何问题？

解决方法

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!