Angular2不能在模板以外的任何地方访问变量

Question

I have problem with accesing array inside component in place other than template. I have students: Student[]; which is then filled by data from json in

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

I can display this data in template via

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

but, if I try to do something like

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

i get Cannot read property 'forEach' of undefined

If I however initialize array as students: Student[] = new Array; i dont get error, but array stays empty. Method getStudents() is called from ngOnInit(). What am I missing?

EDIT

Thanks everyone who tried to help. However none of the solutions worked for me. getStudents() is first method I call in ngOnInit. I just dont understand, why does listing it in template work, but for rest of component array appears to be empty. If I add values to array later, via students.push, they are only values I can access.

Answer 1

try to use elvis operator white fetching data from service like this

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

No need to use forEach

sometimes template loads before getting data from the service so in this case elvis operator will prevent from throwing error

Answer 2

When you declared students objects like

students: Student[] 

please take a deep look into it. you are declaring variable[students] of array of student not initialize it. that means your students is null. So when you are using forEach method on null you you are getting error like 'Cannot read property 'forEach' of undefined'

you can do like

students: Student[] = [];

then use 'forEach' hope. you will not get any error.

Answer 3

The issue is combination of the the students array not being initialized when the forEach is run and with how Angular2's life-cycle hooks work.

ngOnInit is the second method that is called when a component is created, after an initial call to ngOnChanges . If the call to this.studentService.getStudents() hasn't returned by the time the the forEach is called then the error will occur because the students array has not been initialized yet.

The ngOnInit method only gets called once for each component so the reason you aren't seeing any data printed to the console is that when the loop is called it has not received data from the service yet.

I am not sure what your use case is but what I like to do when I need to perform actions on data returned from a service is to create a function that I call from the service callback:

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