角4応答を返さないhttp

Question

私は、httpリクエストを介してデータを取得するための簡単なサービスを作成しました。データはjson形式であり、マップ関数を使用して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の問題が発生したときに私が通常行っていることである、私がブラウザ上でCORSクロムエクステンション（Allow-Control-Allow-Origin：*）を有効にした場合、もう一度示唆するように。何もまだ、コンソールやwebpackからの不平は正常にコンパイルされません。

jsonリクエストの値をサービス内の配列にハードコードしてコンポーネントからアクセスすると、値が返され、console.logでそれらをhtmlに表示できます。

Answer 1

httpリクエストからの応答が表示されない理由は、メインのアプリケーションコンポーネント内でブログリストをインポートせずにメインのアプリケーションコンポーネント内のブログリストコンポーネントを参照していたためです。

私はこの

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

を行うために私に必要なこの

<app-nav-bar></app-nav-bar> 
<app-blog-list></app-blog-list> 

をしていた私は、サービスおよびないから、ハードコードされた配列の値にアクセスすることができるよ、なぜ私はまだわかりませんよhttp-requestからblog-list.componentをメインアプリにインポートせずに

blog.service

public blogExample: Blog; 
    private loading: boolean; 

    constructor(private http: Http) { 
    this.blogExample = { 
     id: 1, 
     title: 'title', 
     content: 'content' 
    }; 
    } 

私はコンソールしようとしたとき、私は、他の男に言ったように

ngOnInit() { 
    this.blogService 
     .getBlogs(this.blogsUrl) 
     .subscribe(res => { 
     this.blogArray = res; 
     console.log('theBlogArray', this.blogArray); 
     }); 

    console.log('blogExample', this.blogService.blogExample); 

    } 

Answer 2

サブスクリプションのconsole print外は

ngOnInit() { 
    this.blogService.getBlogs(this.blogsUrl) 
     .subscribe(res => { 
      this.blogArray = res; 
      console.log('theBlogArray: ', this.blogArray); 
    }, Err => console.log(Err)); 
} 

のようにしてみてくださいresponse.Soを待ちません。

// Service 
import 'rxjs/add/operator/catch'; 

return this.http.get(url) 
    .map((response) => response.json()) 
    .catch(Err); 

Answer 3

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


    } 

あなたは唯一のものは、それはあなたが同期コンテキストでログインできない非同期呼び出しであるとして、あなたは外でそれをロギングコンソールであるということですデータを取得しています。

更新

私はそれがバックエンドに問題があるいくつかのCORSの問題を与えているの角使用して、この同じURLをしようとしたコンソールをチェックしてください。エラーが発生する