Wie lade ich JSON-Daten in Angular2 Komponente

Nach der Ausführung durch viele tutorials auf tinterweb ich habe endlich begonnen, um zu versuchen und zu bauen, etwas nützliches für mich mit Angular2 und ich bin gekommen, über mein erstes Problem. Ich kann nicht scheinen, laden von JSON-Daten in mein service-Komponente.

mein Volk.json-Datei wird gespeichert in einem Ordner namens Daten im obersten Ordner.

Menschen.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 der Freunde.service.ts

Freund.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
        }   
}

Freund.service.ts innerhalb der Freund.Komponente.ts

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

dieser lebt im 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>

Jegliche Hilfe würde sehr geschätzt werden 😉

InformationsquelleAutor Beaker | 2016-04-20

14

In der Tat, es ist, weil Ihre Daten werden asynchron geladen. So im Konstruktor der Komponente erhalten Sie zunächst einen undefinierten Wert.
```
constructor(private _friendService: FriendService) {
  this.friends = _friendService.getFriends();
}
```
Halten den Konstruktor so, müssen Sie überarbeiten Ihren code, um die getFriends Methode von Ihrem Dienst zurückkehren, ein beobachtbares:
```
@Injectable()
export class FriendService { 
  constructor(private http:Http) {
  }

  getFriends() {
    return this.http.request('./data/people.json')
                 .map(res => res.json());
  }
}
```
Dann können Sie die async Rohr in Ihre Komponenten-template:
```
template: `
    <h1>Hello from the {{ componentName }}!</h1>
    <div *ngFor="#f of friends | async">
        <h3>Name: {{ f.name }}</h3> 
        <h4>Age: {{ f.age }}</h4> 
    </div>
`
```
- Hallo Thierry Danke für Antworten schnell. Ich habe bereits versucht mit der Karte aber ich erhalte eine Fehlermeldung in der console unter Angabe... TypeError: this.http.Anfrage(...).Karte ist nicht eine Funktion Als Ergebnis, es ist immer noch nicht gerendert...
- Sie"herzlich willkommen! Sie müssen zum importieren der Betreiber. Siehe diese Frage: stackoverflow.com/questions/34515173/....
- Der Kommentar über das, was für Fehler in Bezug auf .Karte sollte Hinzugefügt werden, um die Haupt-Antwort, das war eine Reise für mich auch, wahrscheinlich noch andere.
- Ich hätte gedacht, dass wenn Sie eine observable, dann würden Sie brauchen, um zu abonnieren, nicht? _friendService.getFriends().subscribe( Daten => { dies.Freunde = data})
InformationsquelleAutor Thierry Templier

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.