Question

我在使用除模板之外的组件内部访问数组时遇到问题。我有students: Student[];，然后由

中的json数据填充

getStudents() {
    this.studentService.getStudents()
        .subscribe(
        students => this.students = students,
        error => this.errorMessage = <any>error );
}

我可以通过

在模板中显示这些数据

<tr *ngFor="let student of students">
    <td>{{ student.id }}</td>
    <td>{{ student.firstName }}</td>
    <td>{{ student.lastName }}</td>
</tr>

但是，如果我尝试做类似

的事情

this.students.forEach(
            s => {
                console.log(s.getFirstName());
            });

我得到Cannot read property 'forEach' of undefined

如果我将数组初始化为students: Student[] = new Array;我不会收到错误，但数组保持为空。方法getStudents（）从ngOnInit（）调用。我错过了什么？

修改

感谢所有试图提供帮助的人。然而，没有一个解决方案适合我。 getStudents（）是我在ngOnInit中调用的第一个方法。我只是不明白，为什么列出它在模板工作，但其余的组件数组似乎是空的。如果我稍后通过students.push向数组添加值，它们只是我可以访问的值。

Answer 1

尝试使用来自此服务的elvis operator白色抓取数据

<tr *ngFor="let student of students">
    <td>{{ student?.id }}</td>
    <td>{{ student?.firstName }}</td>
    <td>{{ student?.lastName }}</td>
</tr>

无需使用forEach

有时template在从服务获取数据之前加载，因此在这种情况下，elvis运算符将防止抛出错误

Answer 2

当您向学生宣传像

这样的对象时

students: Student[]

请深入了解一下。你声明学生阵列的变量[学生]没有初始化它。这意味着你的学生是空的。因此，当您在null上使用forEach方法时，您会收到错误消息，例如“无法读取属性＆＃39; forEach＆＃39;未定义＆＃39;

你可以这样做

students: Student[] = [];

然后使用＆＃39; forEach＆＃39;希望。你不会得到任何错误。

Answer 3

问题是运行students时未初始化forEach数组的组合以及Angular2的生命周期挂钩如何工作。

ngOnInit是在初始调用ngOnChanges之后创建组件时调用的第二个方法。如果在this.studentService.getStudents()被调用之前没有返回对forEach的调用，则会发生错误，因为students数组尚未初始化。

ngOnInit方法只为每个组件调用一次，因此您没有看到打印到控制台的任何数据的原因是，当调用循环时，它还没有从服务接收数据。

我不确定你的用例是什么，但是当我需要对从服务返回的数据执行操作时我喜欢做的是创建一个我从服务回调中调用的函数：

getStudents() {
    this.studentService.getStudents()
        .subscribe(
            students => {
                this.students = students;
                this.printStudents();
            },
            error => this.errorMessage = <any>error );
}

printStudents() {
    this.students.forEach(
        s => {
            console.log(s.getFirstName());
        });
}

Angular2无法在模板中的任何位置访问变量

3 个答案: