Я создал простой сервис для получения данных через HTTP-запрос. Данные представлены в форме json, и я использую функцию map, чтобы она соответствовала типу данных Blog. Однако, когда я вызываю метод "getBlogs" из службы, чтобы получить данные, ничего не возвращается. Есть мысли о том, что мне не хватает?
Компонент.
import {Http} from '@angular/http';
import {forEach} from '@angular/router/src/utils/collection';
import {BlogService} from '../services/blog.service';
import {Component, OnInit} from '@angular/core';
import {Blog} from '../blog/blog';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
@Component({selector: 'app-blog-list', templateUrl: './blog-list.component.html',
styleUrls: ['./blog-list.component.css'],
providers: [BlogService]})
export class BlogListComponent implements OnInit {
blogArray: Blog[] = [];
blogTitle: string;
loading: boolean;
private blogsUrl = 'http://www.mocky.io/v2/59a49eb3100000be05b2aba6';
constructor(private blogService: BlogService, private http: Http) {}
ngOnInit() {
this.blogService
.getBlogs(this.blogsUrl)
.subscribe(res => {
this.blogArray = res;
console.log('theBlogArray', this.blogArray);
});
}
}
Обслуживание
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import {Headers, Http } from '@angular/http';
import { Injectable } from '@angular/core';
import {Blog} from '../blog/blog';
@Injectable()
export class BlogService {
private loading: boolean;
constructor(private http: Http) {}
getBlogs(url: string): Observable<Blog[]> {
this.loading = true;
return this.http.get(url)
.map((response) => response.json());
}
}
Как уже упоминалось в ответах, это может быть проблемой CORS. Однако я не получаю никаких ошибок в консоли. На всякий случай я включил расширение CORS chrome (оно называется Allow-Control-Allow-Origin: *) в моем браузере, что я обычно делаю, когда у меня возникают проблемы с CORS, и я обязательно поместил его в заголовок mocky, снова как предложено. Ничего пока нет, никаких претензий из консоли и вебпак успешно компилируется.
Если я жестко закодирую значения запроса json в массив в сервисе и получу доступ к нему через компонент, значения будут возвращены, и я смогу console.log их и отобразить в html.
3 ответа
Причина, по которой я не увидел ответа на запрос http, заключалась в том, что я делал ссылку на компонент списка блогов внутри основного компонента приложения без импорта списка блогов в основной компонент приложения.
Я делал это
<app-nav-bar></app-nav-bar>
<app-blog-list></app-blog-list>
Что потребовало от меня сделать это
import { Component } from '@angular/core';
import { BlogListComponent } from './blog-list/blog-list.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
Я до сих пор не уверен, почему я могу получить доступ к значению жестко закодированного массива из службы, а не из запроса http без импорта blog-list.component в основное приложение.
Blog.service
public blogExample: Blog;
private loading: boolean;
constructor(private http: Http) {
this.blogExample = {
id: 1,
title: 'title',
content: 'content'
};
}
Блог - list.component
ngOnInit() {
this.blogService
.getBlogs(this.blogsUrl)
.subscribe(res => {
this.blogArray = res;
console.log('theBlogArray', this.blogArray);
});
console.log('blogExample', this.blogService.blogExample);
}
console print вне подписки не будет ждать ответа.
ngOnInit() {
this.blogService.getBlogs(this.blogsUrl)
.subscribe(res => {
this.blogArray = res;
console.log('theBlogArray: ', this.blogArray);
}, Err => console.log(Err));
}
.
// Service
import 'rxjs/add/operator/catch';
return this.http.get(url)
.map((response) => response.json())
.catch(Err);
ngOnInit() {
this.blogService.getBlogs(this.blogsUrl)
.subscribe(res => {this.blogArray = res;
console.log('theBlogArray: ', this.blogArray);// this will work and use it in template like{{blogArray}}
);
}
Вы получаете данные, единственное, что вы консоль регистрируете их снаружи, поскольку это асинхронный вызов, который вы не можете войти в синхронный контекст.
Обновить
Я попробовал этот же URL-адрес, используя angular, он дает какую-то проблему с CORS, там что-то не так с бэкэндом, пожалуйста, проверьте консоль. вы получите ошибку
En Español