Angular2, what is the error when requesting restApi?

Question

Angular

Hi all. I can’t figure out why it doesn’t show data
A couple of points:
- The server sends data in the form of json
- I know what to transfer to a separate file, receiving data, for now everything is in component for tests
Component code,:

import {Component, OnInit} from '@angular/core';
import {Http, Headers, URLSearchParams, Response} from '@angular/http';
import 'rxjs/Rx';
import {GlobalVariable} from './../../app.config'
import {Observable}     from 'rxjs/Observable';

@Component({
    templateUrl: './template.html',
})


export class RegistriesComponent implements OnInit{
    errorMessage: string;
    data:Array<any>;

    constructor(private http: Http) {}
    private urlApi = GlobalVariable.BASE_API_URL;

    ngOnInit() {
        this.getHeroes()
            .subscribe(
                res => this.data = res,
                error =>  this.errorMessage = <any>error,
            )
    }

    getHeroes (): Observable<Array<any>> {
        return this.http.get(this.urlApi + 'rest/nsi/routes')
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }

    private handleError (error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

Output in the template:

<tr *ngFor="let item of data">
     <td>{{item.number}}</td>
</tr>

Answer 1

Show the data that comes from the server.
Is there a "data" field in the response? This is exactly an array of objects containing the "number" field. If so, why is the extractData() method returning an object rather than an array instead of an array? It should probably be like this:

private extractData(res: Response): Array<{"number": any}> {
  return res.json().data || [];
}

Answer 2

I tested it on a plunker and it works... I don't even know where to dig...

import { Component, OnInit } from '@angular/core';
import { HeroService }       from './service';

import 'rxjs/Rx';

@Component({
    templateUrl: 'template.html',
    providers: [ HeroService ]
})
export class RegistriesComponent implements OnInit {
    errorMessage: string;
    public data: Array<any> = [
        {'name':'test1'}
    ]
    constructor (private heroService: HeroService) {}

    ngOnInit() {
        this.data = [
            {'name':'test2'}
        ]
        this.getHeroes()
    }

    getHeroes() {
        console.log(this.heroService.getHeroes().subscribe(
            data => this.data = data,
            error =>  this.errorMessage = <any>error))
    }

}

In the console from the subscriber it says:
Naturally display test2, everything is OK on the plunker, the data is output from the server

Answer 3

Just for the future. As for me, it is better to use ng2-resource-rest for rests (an analogue of ngResource from the 1st Angular)