Question

我遇到了一些服务问题，当我在component.ts中的ngOnInit方法中使用该服务时，.subscribe方法不会填充我的stagevoorstellen []数组。该服务是Observable的一部分。

问题是，当我进入控制台时，我只看到一个空数组。但奇怪的是，在html文件中，数据是从＆＃34;空的＆＃34;中加载的。 array.Only在.html文件中，数组被填充但不在.ts文件中。所以在.ts文件中，数组是空的，但在.html文件中，数组中有数据。

控制台的图像和填充的For循环在下面，第一个日志是空数组，第二个输出是订阅方法中的一个。

亲切的问候布赖恩

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文件，我使用get方法

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

Angular2没有从subscribe方法传递数据

0 个答案: