Angular2 HTTP tapuscrit Json

Question

je un fichier "region.json" stocké localement comme ceci:

{ 
    "regionId":1, 
    "region":"CAN" 
}, 
{ 
    "regionId":2, 
    "region":"CEN" 
} 

Je fichier "enviroment app.component.ts" qui, comme ceci:

import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/core"; 
import {HTTPTestService} from "./http-test.service"; 

@Component({ 
    selector: 'my-app' 
}) 

@View({ 
    template: ` 

<table> 
    <thead> 
     <th>Region Id</th> 
     <th>Region</th> 
    </thead> 
    <tbody> 
     <tr *ngFor="#item of myData"> 
      <td>{{item.regionId}}</td> 
      <td>{{item.Region}}</td> 
     </tr> 
    </tbody> 
</table>` 
    }) 
export class AppComponent { 
myData:any; 
} 

et j'ai fichier « http-test.service.ts » qui ressemblent à:

import {Injectable} from "angular2/core"; 
import {Http} from "angular2/http"; 
import 'rxjs/add/operator/map'; 
import {Headers} from "angular2/http"; 
import {AppComponent} from "./environment_app.component"; 

@Injectable() 
export class HTTPTestService{ 
constructor (private _http: Http){} 

this.myData = {region:[]}; 
get("./region.json") { 
    return this._http.get("./region.json", { headers: headers }) 
     .map(res => res.json()) 
     .subscribe 
     (
     data => { 
      this.myData = data; 
     }); 
} 
} 

Dans le front-End, je ne suis en mesure d'imprimer l'en-tête de

Je veux récupérer toutes les données JSON

Ce que je fais mal ?? S'il vous plaît, Toute aide appréciée,

Merci d'avance.

Answer 1

La réponse de la json va dans une variable nommée myData. Cette variable est un membre du service et non votre classe AppComponent. Cependant,

* ngFor = "item # de myData"

Dans ce qui précède * ngFor, cette variable myData est une partie de votre classe AppComponent qui n'a jamais été rempli.

Faites ceci:

1. Faire une fonction, comme vous l'avez fait dans votre service qui renvoie les données JSON après la lecture du fichier.
2. Renvoyez ces données à AppComponent.
3. Attribuez-le à myData dans AppComponent.