Comment faire pour extraire des données JSON à partir de l'adresse http.obtenir Angulaire 2 correctement?

Je n'arrive pas à gérer pour créer une variable pour l'afficher avec les informations d'un fichier json, mais je suis si proche. Je peux l'écho de l'information dans le .subscribe()de la chaîne, mais il ne sera pas affecter une variable, ils sont juste pas défini, ce que je fais mal?

Je veux juste pour charger mon fichier json dans une variable dans la vue component. Il était facile Angulaire 1.

Mon service:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class GullkornService { 
result: any;

constructor(private http:Http) {
}

getGullkorn()  {

let result = this.result;
this.http.get('./gk/gullkorn.json')
.map(res => res.json())
.subscribe(
        val => this.result = val,
        err => console.error(err),
        () =>  console.log(this.result));  //this one echoes out what i want
        console.log(this.result); //but this one doesnt, so i cant return it 
      }
}

Et l'atterrissage composant: 

import { Component, OnInit } from '@angular/core';
import {Router, RouterOutlet} from '@angular/router';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule }      from '@angular/core';
import { GullkornService } from '../../gullkorn-service.service';
import { FormsModule }   from '@angular/forms';
import {Observable} from 'rxjs/Observable';

import "gsap";
declare var ease, TimelineMax,TweenMax,Power4,Power1,Power2,Power3,Bounce, Elastic:any;

@Component({
  selector: 'gullkorn-visning',
  providers: [GullkornService],
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {
  gullkorn: any;
  constructor(GullkornService: GullkornService) { 
        this.gullkorn = GullkornService.getGullkorn();
        console.log(this.gullkorn);
  }

  ngOnInit() {
  }

}

Basé sur le code actuel, c'est ce que j'obtiens:

Comment faire pour extraire des données JSON à partir de l'adresse http.obtenir Angulaire 2 correctement?

J'ai le projet ici: github.

InformationsquelleAutor Terje Nesthus | 2017-02-11
  1. 2

    C'est une opération asynchrone, de sorte que lorsque vous essayez de console.journal le résultat c'est pas définie, il est en cours d'exécution avant l'autre console.journal à l'intérieur de l'abonnement.

    .subscribe(
        val => this.result = val,
        err => console.error(err),
        () =>  console.log(this.result));  //is run sometimes later
        console.log(this.result); //is run first
      }

    Je voudrais faire quelques changements dans votre code... je vous conseille de prendre soin de l'abonnement dans le composant à la place, ce serait la meilleure façon de gérer http demandes. Donc, juste map dans le service et le retour de la observables à la pièce, n'oubliez pas d'ajouter return déclaration :

    getGullkorn() {
  return this.http.get('./gk/gullkorn.json')
    .map(res => res.json())
}

    Dans votre composant, je vous suggère de déplacer votre appel de service dans OnInit à la place. Ici, vous pouvez également remarquer que les valeurs ne sont pas immédiatement accessibles à l'extérieur de l'abonnement, comme pour les commentaires dans le code. Donc, si vous voulez manipuler vos données en quelque sorte, vous avez besoin de prendre cela en considération 🙂 

    ngOnInit() {
  this.GullkornService.getGullkorn()
    .subscribe(data => {
     //is run sometimes later
     this.gullkorn = data
  });
  //is run first
}

    QUE c'est une opération asynchrone, alors soyez prêt à utiliser ngIf ou la la sécurité de la navigation de l'opérateur de votre point de vue, puisque la vue est rendue avant que les données ont été récupérées.

    Donc, soit l'enveloppe de votre code à l'intérieur de ngIf:

    <div *ngIf="gullkorn"></div>

    ou {{gullkorn?.someProperty}}

    • MERCI!!!! Cela a fonctionné sur le premier essai, été une lutte pour moi. Merci de votre temps beaucoup. L'appel de la fonction avec abonnez-vous dans le composant a fait l'affaire!
    • Vous êtes les bienvenus! Oui, je comprends. Les opérations asynchrones est très déroutant au début! Ajouté un peu plus le contexte autour de ce toujours dans ma réponse, e.g si vous avez besoin de manipuler des données dans le composant en quelque sorte sur la navigation de la page, vous avez besoin de l'avis où les données sont disponibles dans l'abonnement et où pas, de la pensée, il peut être utile pour l'avenir 🙂 amusez-vous bien! 🙂
    InformationsquelleAutor AJT_82
  2. 1

    C'est mieux pour revenir le observable du service et de vous y abonner pour le composant:

    service:

    @Injectable()
export class GullkornService {

  constructor(private http:Http) {
  }

  getGullkorn()  {
    //Return the observable here
    return this.http.get('./gk/gullkorn.json')
    .map(res => res.json());
  }

}

    composant:

    @Component({
  selector: 'gullkorn-visning',
  providers: [GullkornService],
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
})
export class LandingComponent implements OnInit {
  gullkorn: any;
  constructor(GullkornService: GullkornService) { 
      GullkornService.getGullkorn()
        .subscribe(
            val => this.gullkorn = val,
            err => console.error(err)
  }

  ngOnInit() {
  }

}
    • Merci!!!! C'est la façon dont je le fais maintenant. Mais im me demandais une chose nouvelle, quand et comment dois-je me désinscrire de ce, ou fait-il automatiquement?
    • vous pouvez vous abonner en ngOnInit et de désabonnement dans ngOnDestroy
    InformationsquelleAutor Ofer Herman