Angular2, в чём ошибка при запросе restApi?

Question

[mr_plutus]

Привет всем. Не могу вкурить почему не показывает данные

Пару моментов:
- Сервер отдаёт данные в виде json
- Что нужно перенести в отдельный файл получение данных знаю, пока для тестов всё в component

Код компонента,:

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

Вывод в шаблоне:

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

Comments

[Андрей]

Советую открыть отладчик в браузере и поставить брэйкпойнты на `extractData` и на присвоение `this.data` - так увидите, в какой момент что именно происходит с данными.

Answer 1

[Руслан Лопатин]

Покажите данные, что с сервера приходят.

В ответе точно есть поле "data"? Это точно массив объектов, содержащих поле "number". Если так, то почему вместо массива из метода extractData() возвращается объект, а не массив? Должно быть, наверное, так:

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

Comments

[mr_plutus]

C сервера возвращается json
[{"name":"1-й микÑоÑайон â 2-й микÑоÑайон","number":"19","regnumber":"1650","length":5.7,"description":null,"munic_name":"г.о. ÐоÑолев","routeKind":{"uuid":"de6892f3-8cbb-4acc-8788-b540f3b5baaf","name":"ÐÐРÐÐСÐÐÐ"},"routeReg":{"uuid":"e9104d8b-b7a0-4b15-8626-8cba68368ced","name":"ALL"},"routeStatus":{"uuid":"f8e0afc7-27d2-43fa-b3ff-48c8941402a9","name":"ÐÐТУ

[Руслан Лопатин]

Ну, вот, это просто массив. Так что вместо `res.json().data` нужно написать просто `res.json()`

[mr_plutus]

Всё равно не работает хоть убей (( Консоль молчит

ngOnInit() {
this.getHeroes()
.subscribe(
res => this.data = res
)
}

getHeroes (): Observable {
return this.http.get(url)
.map((res:Response) => res.json())
}

[Руслан Лопатин]

Ну, я даже не знаю. Отлаживать надо. Попробуйте в шаблон вставить что-то типа !!!{{data | json}}!!!. Восклицательный знаки - чтобы точно знать, что дело не в шаблоне

[mr_plutus]

getHeroes (): Observable
Передавать "any" норм ?

{{data | json}} - ничего не выводит в шаблоне и ошибок нет в консоли.

[mr_plutus]

data:any = 'ff';

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

ngOnInit() {
this.getHeroes()
.subscribe(
res => this.data = res
)
}

присвоил значение в data его и выводит в шаблоне, разве переменная не перезаписывается ?

[Руслан Лопатин]

Это значит, что данные не приходят. Может быть что угодно. Например, ответ не application/json. Попробуйте навставлять console.log() везде, где только можно, как вам сразу советовали. Например

(res:Response) => {console.log(res, res.json()); return res.json();}

[mr_plutus]

Как насчёт платной консультации в скайпе ?)

[Руслан Лопатин]

В общем вставил я ваш код и тестовые данные в свой проект. Всё работает. Ошибка где-то ещё.

Answer 2

[mr_plutus]

Потестировал на плункере работает... Куда копать даже не знаю...

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

}

В консоли от субскрайбера мишет:

Subscriber {closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false…}

Выводить естессно test2, на плункере всё ок данные выводит с сервера

Answer 3

[nuclear_kote]

Просто на будущее. Как по мне для рестов лучше юзать ng2-resource-rest (аналог ngResource из 1го ангулара)