Я создал простой сервис для получения данных через 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.

0
Fernando Ania 30 Авг 2017 в 21:31

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

  }
0
Fernando Ania 30 Авг 2017 в 21:50

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);
0
Rajez 30 Авг 2017 в 18:59
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}}
);


  }

Вы получаете данные, единственное, что вы консоль регистрируете их снаружи, поскольку это асинхронный вызов, который вы не можете войти в синхронный контекст.

< Сильный > Обновление

Error in your console

Я попробовал этот же URL-адрес, используя angular, он дает какую-то проблему с CORS, там что-то не так с бэкэндом, пожалуйста, проверьте консоль. вы получите ошибку

1
Rahul Singh 30 Авг 2017 в 19:16