Тема широко освещена в интернете, на stackoverflow.com нашёл более 4-х вопросов по этой теме. Но решения, приведённые там, почему-то не работают. При этом данные из файла вполне получается забрать промисом. Адрес файла в переменной apiHost
задан верно. По крайней мере, промис данные оттуда забирает нормально.
friends.service.ts
:
import { Injectable } from '@angular/core';
import { Friend } from './friend';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { MessageService } from './message.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
@Injectable()
export class FriendsService {
public apiHost: string = './assets/generated.json';
constructor(private http: Http, private messageService: MessageService) {
}
getFriends():Observable<any> {
return this.http.get(this.apiHost)
.map((res:Response) => {res.json();})
.catch((error:any) => Observable.throw(error.json().error || 'Can\'t get generated.json'));
}
getFriend(id: string):Observable<any> {
/* ... */
}
}
friends-list.component.ts
:
import { Component, OnInit } from '@angular/core';
import { Friend } from '../friend';
import { FriendsService } from '../friends.service';
@Component({
selector: 'app-friends-list',
templateUrl: './friends-list.component.html',
styleUrls: ['./friends-list.component.css']
})
export class FriendsListComponent implements OnInit {
public friends: Object;
selectedFriend: Friend;
onSelect(friend: Friend): void {
this.selectedFriend = friend;
}
getFriends(): void {
this.friendsService.getFriends().subscribe(result => this.friends = result);
}
constructor(private friendsService: FriendsService) { }
ngOnInit() {
this.getFriends();
}
}
Ошибок нет ни в консоли, ни в браузере. Что не так? Почему сервис не возвращает данные файла?
Для примера, рабочий код с промисом:
friends.service.ts
:
import { Injectable } from '@angular/core';
import { Friend } from './friend';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise'; // Чтобы забрать инфу промисом
import { MessageService } from './message.service';
@Injectable()
export class FriendsService {
public apiHost: string = './assets/generated.json';
constructor(private http: Http, private messageService: MessageService) {
}
// Забираем json промисом
public getFriends(): Promise<Object> {
return this.http.get(this.apiHost)
.toPromise()
.then((response) => {
this.messageService.add({message: 'Список друзей загружен.', type: 'success'});
return response.json();
}).catch((err) => {
this.messageService.add({message: 'Не удалось загрузить список друзей.', type: 'error'});
console.log(err);
});
}
}
friends-list.component.ts
:
import { Component, OnInit } from '@angular/core';
import { Friend } from '../friend';
import { FriendsService } from '../friends.service';
@Component({
selector: 'app-friends-list',
templateUrl: './friends-list.component.html',
styleUrls: ['./friends-list.component.css']
})
export class FriendsListComponent implements OnInit {
public friends: Object;
selectedFriend: Friend;
onSelect(friend: Friend): void {
this.selectedFriend = friend;
}
getFriends(): void {
this.friendsService.getFriends().then(result => this.friends = result);
}
constructor(private friendsService: FriendsService) { }
ngOnInit() {
this.getFriends();
}
}