javascript - Angular 4 http 未返回响应

Question

我创建了一个简单的服务来通过 http 请求获取数据。数据采用 json 形式，我使用 map 函数，使其与博客数据类型匹配。但是，当我从服务调用方法“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 的 header 中，再次按照建议。还什么都没有，控制台没有任何提示，webpack 编译成功。

如果我将 json 请求的值硬编码到服务中的数组中并通过组件访问它，则会返回这些值，我可以 console.log 它们并将它们显示在 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 问题，后端有问题，请检查控制台。你会得到错误