Question

我创建了一个简单的服务来通过http请求获取数据。数据是json形式，我使用map函数，以便它匹配Blog数据类型。但是，当我调用方法＆＃34; getBlogs＆＃34;从服务获取数据没有返回任何内容。对我缺少什么的想法？

组件。

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问题时通常会做的事情，并且我确保将其放入嘲笑的标题，再次按照建议。还没有，没有来自控制台和webpack的抱怨成功编译。

如果我将json请求的值硬编码到服务中的数组中，则通过组件访问它，返回值，我可以调试它们并将它们显示在html上。

Answer 1

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


  }

您获取数据的唯一原因是您是控制台将其记录到外部，因为它是异步调用，您无法登录同步上下文。

<强>更新

我尝试使用angular这个相同的url它给出了一些CORS问题后端有问题请检查控制台。你会收到错误

Answer 2

订阅之外的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);

Answer 3

我没有看到http请求的响应的原因是因为我在主应用程序组件中引用了blog-list组件而没有在主应用程序组件中导入blog-list。

我这样做

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

  }

Angular 4 http没有返回响应

3 个答案: