Wie lade ich JSON-Daten in Angular2-Komponente

Nachdem ich viele Tutorials auf Tinterweb durchlaufen habe, habe ich endlich begonnen zu versuchen, etwas Nützliches zu bauen mit Angular2 und ich bin auf meine erste Ausgabe gestoßen. Ich kann anscheinend keine JSON-Daten in meine Servicekomponente laden.Wie lade ich JSON-Daten in Angular2-Komponente

Meine people.json Datei wird in einem Ordner namens Daten im obersten Ordner gespeichert.

people.json

"people":[ 
    { age: 40, name: "Jordan Houston" }, 
     { age: 38, name: "Robert Eastham" }, 
     { age: 23, name: "Josh Beh" }, 
     { age: 23, name: "Joseph Canina" }, 
     { age: 24, name: "Alexandra Wilkins" }, 
     { age: 22, name: "Kiersten Costanzo" }, 
     { age: 23, name: "Ku Sherwood" }, 
     { age: 25, name: "Arta Halili" }, 
     { age: 24, name: "Patrick Cooney" }, 
     { age: 23, name: "Z.A. Perr" }, 
     { age: 18, name: "Tyler Mulligan" }, 
     { age: 26, name: "Dennis Dempsey" }, 
     { age: 32, name: "Francis Yeager" }, 
     { age: 23, name: "Phil Belardi" } 
]

Ich glaube, mein Problem liegt in den friends.service.ts

friend.service.ts

import {Injectable} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 

@Injectable() 

export class FriendService { 

    friends:Array<any>; 

    constructor(private http:Http) 
     { 
      //console.log(">>friend.service.ts:constructor--") 
      http.request('./data/people.json') 
        .subscribe(response => this.friends = response.json())); 
    } 

     getFriends() 
     { 
      //console.log(">>friend.service.ts:getFriends--") 
      console.log(this.friends) 
      return this.friends 
     } 
}

friend.service.ts können verwendet werden, die friend.component.ts

friend.component.ts

import { Component } from 'angular2/core'; 
import { FriendService } from 'app/friend.service'; 

@Component({ 
    selector: 'my-friends', 
     providers: [FriendService], 
     styles: [` 
      div { 
       background-color:#EFEFEF; 
       margin-bottom:15px; 
       padding:15px; 
       border:1px solid #DDD; 
       box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3); 
       border-radius:3px; 
      } 
     h2 { 
      text-align: center; 
     } 
    `], 
    template: ` 
     <h1>Hello from the {{ componentName }}!</h1> 
     <div *ngFor="#f of friends"> 
      <h3>Name: {{ f.name }}</h3> 
      <h4>Age: {{ f.age }}</h4> 
     </div> 
    ` 
}) 


export class FriendComponent { 

    componentName: 'FriendComponent'; 

     constructor(private _friendService: FriendService) 
     { 
     this.friends = _friendService.getFriends(); 
    } 
}

diese lebt in main.ts

main.ts

import { Component } from 'angular2/core'; 
import { bootstrap } from 'angular2/platform/browser'; 

import { FriendComponent } from 'app/friend.component'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 


@Component({ 
    selector: 'my-app', 
    directives: [FriendComponent], 
    styles: [` 
    h1 { 
    color:#545454; 
    background:#02A8F4; 
    padding:15px; 
    box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3); 
    } 
    `] 
    template: ` 
    <div> 
    <h1>Hello from the {{componentName}}.</h1> 
    <my-friends></my-friends> 
    </div> 
    ` 
}) 
export class AppComponent { 
    componentName: 'AppComponent' 
} 

bootstrap(AppComponent,[HTTP_PROVIDERS])

... und hier ist die Index-Seite ...

<!DOCTYPE html> 
<html> 
<head> 
    <script>document.write('<base href="' + document.location + '" />');</script> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!--Add Bootstrap CSS Styles--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <!-- IE required polyfills, in this exact order --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> 
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <!-- Angular polyfill required everywhere --> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script> 

    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script> 

    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: { 
      'api': {defaultExtension: 'ts'}, 
      'app': {defaultExtension: 'ts'} 
     } 
     }); 
    System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 

</head> 
<body class="container"> 

    <my-app>Loading...</my-app> 

</body> 
</html>

Jede Hilfe wäre sehr geschätzt;)

Quelle

2016-04-20 Beaker

In der Tat ist es, weil Ihre Daten asynch geladen werden ronig. So erhalten Sie innerhalb des Konstruktors Ihrer Komponente zunächst einen undefinierten Wert.

constructor(private _friendService: FriendService) { 
    this.friends = _friendService.getFriends(); 
}

Um Ihren Konstruktor so zu halten, müssen Sie Ihren Code Refactoring die getFriends Methode Ihres Dienstes machen Rückkehr eine beobachtbare:

@Injectable() 
export class FriendService { 
    constructor(private http:Http) { 
    } 

    getFriends() { 
    return this.http.request('./data/people.json') 
       .map(res => res.json()); 
    } 
}

Dann Sie die async Rohr in Ihrer Komponente Vorlage verwenden können :

template: ` 
    <h1>Hello from the {{ componentName }}!</h1> 
    <div *ngFor="#f of friends | async"> 
     <h3>Name: {{ f.name }}</h3> 
     <h4>Age: {{ f.age }}</h4> 
    </div> 
`

Quelle

2016-04-20 16:04:14

Hallo Thierry Danke für für schnell reagieren. Ich habe bereits versucht, Karte zu verwenden, aber ich erhalte einen Fehler in der Konsole, die besagt, dass ... TypeError: this.http.request (...). Map ist keine Funktion Als Ergebnis wird es immer noch nicht gerendert. .. – Beaker

Sie sind herzlich willkommen! Sie müssen den Operator importieren. Siehe diese Frage: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276. –

Der Kommentar, was zu tun ist, wenn Fehler in Bezug auf .map auftreten, sollte zur Hauptantwort hinzugefügt werden, das war ein Trip-up für mich auch, wahrscheinlich andere. –

Wie lade ich JSON-Daten in Angular2-Komponente

Antwort

Verwandte Themen