Angular2未从subscribe方法传递任何数据

我对该服务有一些问题，当我在component.ts中的ngOnInit方法中使用该服务时，.subscribe方法无法填充我的stagevoorstellen[]数组。服务是可观察的一部分

问题是，当我转到控制台时，我只看到一个空数组。 但奇怪的是，在html文件中，数据是从“空”数组加载的，只有在.html文件中填充数组，而不是在.ts文件中。因此在.ts文件中数组是空的，但是在.html文件中数组中有数据

控制台的映像和填充的For循环在下面，第一个日志是空数组，第二个输出是来自subscribe方法的

问候 布莱恩

组件1.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;
}

---

检查：谢谢你的回复，我知道我必须把我所有的代码都放在subscribe方法中，在那里，数据仍然存在（你的链接解释了这一点）。但是一旦subscribe方法结束，它会将我的数组放回未定义状态，即使我将数组设置为某个值的唯一位置是subscribe方法中。。。有没有一种方法可以存储数据，而不会在subscribe方法之外消失，并将其放回未定义状态@echonaxHow您知道订阅后数据未定义吗？在最后两行代码的component.ts文件中，我使用控制台记录数组。这些阵列显示在上面的“控制台”图像中。我不是说未定义，但它不会给另一个数组赋值，对不起。我发现了问题所在，谢谢@echonax的帮助！

<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>

    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];
    }