2

我有一个非常简单的 Angular2 组件：

@Component({
    moduleId: module.id,
    selector: 'app-people',
    templateUrl: 'people.component.html'
})
export class PeopleComponent implements OnInit {

    people: any[] = [];

    constructor(private peopleService: PeopleService) {
    }

    ngOnInit() {
        this.peopleService.getPeople()
            .subscribe(this.extractPeople);
    }

    extractPeople(result: any) {
        this.people = result.people;
    }
}

在初始化时，我看到它ngOnInit()被称为 which calls peopleService.getPeople()。我还看到了调用的异步返回extractPeople()。但是，即使在this.people更新后，组件也不会重新渲染。为什么会这样？为什么未检测到更改？

编辑 这里有一些相关代码以获取额外的上下文：

people.component.html

<tr class="person-row" *ngFor="let person of people">
    <td class="name">{{person.name}}</td>
</tr>

人服务.ts

getPeople(): Observable<any> {
    return this.http
        .get(peopleUrl)
        .map(response => response.json());
}

如果我console.log(this.people)在里面PeopleComponent.extractPeople()，我会正确地得到一群人：

[
    {
        id: 11,
        name: "John Smith"
    },
    ...
]

但是，此时不会重新渲染组件。该视图仍显示人员数组的初始值，该数组为空。事实上，如果我用几个硬编码的人初始化数组，他们会在组件的初始渲染中正确显示。然而，当真正的 http 数据到达时，这个列表不会重新渲染！就好像变化检测根本没有触发。

4

1 回答 1

3

我想你需要使用箭头函数来保留this这一行：

this.peopleService.getPeople()
   .subscribe(this.extractPeople); <=== here

这样你的代码应该是这样的：

this.peopleService.getPeople()
   .subscribe((res) => this.extractPeople(res));

有关使用箭头函数的更多信息，您可以在此处找到https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this

于 2016-05-21T12:23:20.990 回答