Angular 4 http nicht zurück Antwort

Question

Ich habe einen einfachen Dienst erstellt, um Daten über eine http-Anfrage zu erhalten. Die Daten sind in JSON-Form und ich verwende die Map-Funktion, so dass sie dem Blog-Datentyp entspricht. Wenn ich jedoch die Methode "getBlogs" vom Dienst aufruft, um die Daten zu erhalten, wird nichts zurückgegeben. Irgendwelche Gedanken darüber, was ich vermisse?

Die Komponente.

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

} 

Das Service

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

} 

Wie in den Antworten erwähnt könnte es ein CORS Problem sein. Allerdings bekomme ich in der Konsole überhaupt keine Fehler. Nur für den Fall, dass ich die CORS-Chrome-Erweiterung (Allow-Control-Allow-Origin: *) in meinem Browser aktiviert habe, was ich normalerweise mache, wenn ich CORS-Probleme habe und in die Kopfzeile von mocky setze, wieder wie vorgeschlagen. Noch nichts, keine Beschwerden von der Konsole und Webpack kompiliert erfolgreich.

Wenn ich die Werte der JSON-Anfrage in ein Array im Service hart Code und Zugriff es über Komponente, werden die Werte zurückgegeben und ich kann sie console.log und zeigen sie auf dem HTML.

Answer 1

Der Grund, warum ich die Antwort von der http-Anfrage nicht sah, war, weil ich einen Verweis auf die Blog-Liste Komponente innerhalb der Haupt-App-Komponente machte, ohne Blog-Liste in der Haupt-App-Komponente zu importieren.

ich tat diesen

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

Was mich erforderlich, um diesen

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

zu tun, bin ich immer noch nicht sicher, warum ich in der Lage bin, den Wert des harten codierten Array aus dem Dienst zuzugreifen und nicht von der HTTP-Anfrage, ohne blog-list.component in die Haupt-App zu importieren.

blog.service

public blogExample: Blog; 
    private loading: boolean; 

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

Blog-list.component

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

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

    } 

Answer 2

Die console print außerhalb des Abonnements nicht für response.So warten versuchen, wie

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

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


    } 

Sie erhalten die Daten die einzige Sache ist, dass Sie Konsole sind es außerhalb der Anmeldung, da es ein asynchroner Aufruf ist, dass Sie nicht im synchronen Kontext anmelden kann.

aktualisiert

habe ich versucht, diese gleiche URL Winkel es einig CORS Problem wird gibt es etwas falsch mit dem Backend gibt es bitte Konsole überprüfen. Sie erhalten Fehler