数据更改时 Angular2 组件不呈现

Question

我有一个非常简单的 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() 被调用，而 peopleService.getPeople() 被调用。我还看到调用 extractPeople() 的异步 return。但是，即使在 this.people 更新后，组件也不会重新渲染。为什么会这样？为什么未检测到更改？

编辑下面是附加上下文的一些相关代码：

people.component.html

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

people.service.ts

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

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

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

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

Answer 1

我想你需要使用 箭头函数 来在这一行保留 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

数据更改时 Angular2 组件不呈现

Angular2 component not rendering when data changes

angular2-changedetection

angular