Angular2 no data is passed from the subscribe method

Question

I have had some problems with the service, when I use the service in the ngOnInit method in component.ts, the .subscribe method does not fill my stagevoorstellen[] array. The service is part of Observable.

The problem is that When i go to the console I only see an empty array. But the weird part is that in the html file, the data is loaded in from the "empty" array.Only in the .html file the array is filled in but not in the .ts one. So in the .ts file the array is empty, but in the .html file there is data in the array.

The image of the console and the filled in For loop are down below, the first log is the empty array, the second output is the one from the subscribe method.

Kind regards Brian

Console

empty array through getter

component.ts:

import {Component, OnInit} from '@angular/core';
import {IStageopdracht} from '../../shared/stageopdracht';
import {StagevoorstellenService} from './coordinatorStagevoorstellen.service';

@Component({
    selector: 'coordinator-stagevoorstellen',
    moduleId: module.id,
    templateUrl: 'coordinatorStagevoorstellen.component.html',
    styleUrls: ['../../assets/css/in/content.css']
})
/* tslint:disable */
export class CoordinatorStagevoorstellenComponent implements OnInit{
    listRichtingFilter: String = 'AON';//TEST
    listStatusFilter: String = 'NogTeKeuren';//TEST
    stagevoorstellen: IStageopdracht[] = [];
    errorMessage: String;

    constructor(private _stagevoorstellenService: StagevoorstellenService){
    }

    ngOnInit(): void {
        this._stagevoorstellenService.getStagevoorstellen()
                .subscribe(stagevoorstellen => this.stagevoorstellen = <IStageopdracht[]>stagevoorstellen,
                           error => this.errorMessage = <any>error);
    }
getStagevoorstellen(): IStageopdracht[]{
    return this.stagevoorstellen;
}

component.html:

<div id="title">
    <span>Stagevoorstellen</span>
</div>
<div  style="display: table-row" id="stagevoorstelDropdown">
    <div style="display: table-cell">
        <b>Voorkeur afstudeerrichting</b>
        <select #selectedStatus (change)="checkStatus(selectedStatus.value)">
            <option value= "NogTeKeuren">Nog te keuren</option>
            <option value= "Afgekeurd" >Afgekeurd</option>
        </select>
    </div>
    <div style="display: table-cell">
        <b>Afstudeerrichting</b>
        <select #selectedRichting (change)="checkRichting(selectedRichting.value)">
            <option value= "AON">Applicatieontwikkeling</option>
            <option value= "SWM">Softwaremanagement</option>
            <option value= "SNB">System and networks</option>
        </select>
    </div>

</div>
<div id="content">
    <table>
        <thead>
        <tr >
            <th>Naam Bedrijf</th>
            <th>Gemeente</th>
            <th>Opdracht</th>
            <th>Omgeving</th>
            <th>Meer</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let voorstel of stagevoorstellen | stagevoorstellenRichtingFilter : listRichtingFilter | stagevoorstellenStatusFilter : listStatusFilter">
            <td>{{ voorstel.Omschrijving }}</td>
            <td>{{ voorstel.Gemeente }}</td>
            <button>Info opdracht</button>
            <td>
                <ul>
                    <li>{{ voorstel.Onderzoeksthema }}</li>
                </ul>
            </td>
            <a class="btn btn-default" [routerLink]="['/voorstel',voorstel.StageopdrachtId]">
                <i class="glyphicon glyphicon-chevron"></i>Meer
            </a>
        </tr>
        </tbody>

    </table>
</div>

.ts file where I use the get method

    import { ActivatedRoute, Router} from '@angular/router';
import {Component, OnInit} from '@angular/core';
import {IStageopdracht} from '../../shared/stageopdracht';
import {CoordinatorStagevoorstellenComponent} from './coordinatorStagevoorstellen.component';

@Component({
    selector: 'coordinator-stagevoorstellenDetail',
    moduleId: module.id,
    templateUrl: 'coordinatorStagevoorstellenDetail.component.html',
    styleUrls: ['../../assets/css/in/content.css']
})

export class CoordinatorStagevoorstellenDetailComponent implements OnInit{
    pageTitle: String = 'Stagevoorstel details:';
    voorstellen: IStageopdracht[] = [];
    voorstel: IStageopdracht;

    constructor(private _route: ActivatedRoute,
                private _router: Router,
                private _stageV: CoordinatorStagevoorstellenComponent){
    }

    ngOnInit(): void {
        console.log(+this._route.snapshot.params['id']);
        let id = +this._route.snapshot.params['id'];
        this.pageTitle += " " + id;
        this.voorstellen = this._stageV.getStagevoorstellen(); // This is where it returns an empty array
        console.log(this._stageV.getStagevoorstellen()); //This is the console
        this.findVoorstel(id);
    }

    findVoorstel(id: number): void {
        this.voorstel = this.voorstellen[id - 1];
    }