Laden Sie JSON-Inhalte aus einer lokalen Datei mit http.get() in Angular 2

Question 1

Ich versuche, eine lokale JSON-Datei mit zu laden http.get() in Angular 2. Ich habe etwas ausprobiert, das ich hier auf Stack Overflow gefunden habe. Es sieht aus wie das:

Das ist mein app.module.ts wo ich import der HttpModule und der JsonModule von @angular/http:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { NavCompComponent } from './nav-comp/nav-comp.component';
import { NavItemCompComponent } from './nav-comp/nav-item-comp/nav-item-comp.component';


@NgModule({
    declarations: [
        AppComponent,
        NavCompComponent,
        NavItemCompComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

In meinem KomponenteICH import Http und Response von @angular/http. Dann habe ich eine Funktion aufgerufen loadNavItems()wo ich versuche, meinen JSON-Inhalt mit einem relativen Pfad zu laden http.get() und drucken Sie das Ergebnis mit aus console.log(). Die Funktion wird aufgerufen ngOnInit():

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
    selector: 'app-nav-comp',
    templateUrl: './nav-comp.component.html',
    styleUrls: ['./nav-comp.component.scss']
})
export class NavCompComponent implements OnInit {

    navItems: any;

    constructor(private http: Http) { }

    ngOnInit() {
        this.loadNavItems();
    }

    loadNavItems() {
        this.navItems = this.http.get("../data/navItems.json");
        console.log(this.navItems);
    }
}

Mein lokale JSON-Datei sieht aus wie das:

[{
        "id": 1,
        "name": "Home",
        "routerLink": "/home-comp"
    },
    {
        "id": 2,
        "name": "&Uuml;ber uns",
        "routerLink": "/about-us-comp"
    },
    {
        "id": 3,
        "name": "Events",
        "routerLink": "/events-comp"
    },
    {
        "id": 4,
        "name": "Galerie",
        "routerLink": "/galery-comp"
    },
    {
        "id": 5,
        "name": "Sponsoren",
        "routerLink": "/sponsoring-comp"
    },
    {
        "id": 6,
        "name": "Kontakt",
        "routerLink": "/contact-comp"
    }
]

Es gibt keine Fehler in der Konsole und ich bekomme nur diese Ausgabe:

In meinem HTML-Vorlage Ich möchte die Elemente wie folgt schleifen:

<app-nav-item-comp *ngFor="let item of navItems" [item]="item"></app-nav-item-comp>

Ich habe das mit einer Lösung gemacht, die ich hier auf Stack Overflow gefunden habe, aber warum funktioniert es nicht?

Relativen Pfad bearbeiten:

Ich habe auch ein Problem mit meinem relativen Pfad, aber ich bin mir sicher, dass es der richtige ist, wenn ich ihn verwende ../data/navItems.json. Auf dem Screenshot sieht man die nav-comp.component.ts Datei, in der ich den JSON-Inhalt über einen relativen Pfad aus der JSON-Datei lade, die sich im Ordner namens data befindet? Was ist falsch? Gibt die Konsole einen 404-Fehler aus, weil sie meine JSON-Datei nicht im relativen Pfad finden kann?

Question 2

Für Winkel 5+führen Sie nur Schritte aus 1 und 4

Um lokal auf Ihre Datei zuzugreifen in Eckig 2+ Sie sollten Folgendes tun (4 Schritte):

[1] Erstellen Sie in Ihrem Assets-Ordner eine .json Datei, Beispiel: data.json

[2] Gehen Sie zu Ihrem angle.cli.json (angular.json in Angular 6+) in Ihrem Projekt und in der Vermögenswerte Array legen Sie ein anderes Objekt (nach der Paket.json Objekt) so:

{ “glob”: “data.json”, “input”: “./”, “output”: “./assets/” }

vollständiges Beispiel aus angle.cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        { "glob": "package.json", "input": "../", "output": "./assets/" },
        { "glob": "data.json", "input": "./", "output": "./assets/" }
      ],

Merken, data.json ist nur die Beispieldatei, die wir zuvor im Ordner „Assets“ hinzugefügt haben (Sie können Ihre Datei beliebig benennen).

[3] Versuchen Sie, über localhost auf Ihre Datei zuzugreifen. Es sollte innerhalb dieser Adresse sichtbar sein, http://localhost:your_port/assets/data.json

Wenn es nicht sichtbar dann hast du was falsch gemacht. Stellen Sie sicher, dass Sie darauf zugreifen können, indem Sie sie in das URL-Feld Ihres Browsers eingeben, bevor Sie mit Schritt 4 fortfahren.

[4] Führen Sie nun eine GET-Anforderung durch, um Ihre abzurufen .json Datei (Sie haben Ihren vollständigen Pfad .json URL und es sollte einfach sein)

 constructor(private http: HttpClient) {}
        // Make the HTTP request:
        this.http.get('http://localhost:port/assets/data.json')
                 .subscribe(data => console.log(data));

Question 3

Du musst dich ändern

loadNavItems() {
    this.navItems = this.http.get("../data/navItems.json");
    console.log(this.navItems);
}

zu

loadNavItems() {
    this.navItems = this.http.get("../data/navItems.json")
                    .map(res => res.json())
                    .do(data => console.log(data));
                    // This is optional. You can remove the last line
                    // if you don't want to log the loaded JSON file 
                    // in the console.
}

Weil this.http.get gibt ein zurück Observable<Response> und Sie wollen nicht die Antwort, Sie wollen ihren Inhalt.

Die console.log zeigt Ihnen ein Observable, was korrekt ist, da navItems ein enthält Observable<Response>.

Um Daten richtig in Ihre Vorlage zu bekommen, sollten Sie eine verwenden async Rohr.

<app-nav-item-comp *ngFor="let item of navItems | async" [item]="item"></app-nav-item-comp>

Das sollte gut funktionieren. Weitere Informationen finden Sie unter HTTP-Client-Dokumentation.

Question 4

Meine eigene Lösung

Ich habe eine neue erstellt component namens test in diesem Ordner:

Ich habe auch einen Mock namens erstellt test.json in dem assets Ordner erstellt von angular cli (wichtig):

Dieser Mock sieht so aus:

[
        {
            "id": 1,
            "name": "Item 1"
        },
        {
            "id": 2,
            "name": "Item 2"
        },
        {
            "id": 3,
            "name": "Item 3"
        }
]

Im Controller meiner Komponente test, import Folgen rxjs so was:

import 'rxjs/add/operator/map'

Das ist wichtig, weil Sie es müssen map dein response aus dem HTTP BEKOMMEN aufrufen, sodass Sie JSON-Inhalte erhalten und diese in Ihrer Schleife ausführen können ngFor. Hier ist mein Code, wie ich die Scheindaten lade. ich benutzte http get und nannte meinen Weg zum Schein mit diesem Weg this.http.get("/assets/mock/test/test.json"). Danach ich map die Antwort u subscribe es. Dann weise ich es meiner Variablen zu items und Schleife es mit ngFor in meinem template. Ich exportiere auch den Typ. Hier ist mein gesamter Controller-Code:

import { Component, OnInit } from "@angular/core";
import { Http, Response } from "@angular/http";
import 'rxjs/add/operator/map'

export type Item = { id: number, name: string };

@Component({
  selector: "test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"]
})
export class TestComponent implements OnInit {
  items: Array<Item>;

  constructor(private http: Http) {}

  ngOnInit() {
    this.http
      .get("/assets/mock/test/test.json")
      .map(data => data.json() as Array<Item>)
      .subscribe(data => {
        this.items = data;
        console.log(data);
      });
  }
}

Und meine Schleife in seiner template:

<div *ngFor="let item of items">
  {{item.name}}
</div>

Es funktioniert wie erwartet! Ich kann jetzt weitere Scheindateien im Assets-Ordner hinzufügen und einfach den Pfad ändern, um ihn als zu erhalten json. Beachten Sie, dass Sie auch die importieren müssen HTTP und Response in Ihrem Steuergerät. Dasselbe in Ihnen app.module.ts (main) wie folgt:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, JsonpModule } from '@angular/http';


import { AppComponent } from './app.component';
import { TestComponent } from './components/molecules/test/test.component';


@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Question 5

Das fand ich einfachste Eine Möglichkeit, dies zu erreichen, besteht darin, die hinzuzufügen file.json Datei unter Ordner Vermögenswerte.

Gibt es nicht beliebig Datei bearbeiten müssen .angular-cli.json.

`Service`

@Injectable()
export class DataService {
  getJsonData(): Promise<any[]>{
    return this.http.get<any[]>('http://localhost:4200/assets/data.json').toPromise();
  }
}

`Component`

private data: any[];

constructor(private dataService: DataService) {}

ngOnInit() {
    data = [];
    this.dataService.getJsonData()
      .then( result => {
        console.log('ALL Data: ', result);
        data = result;
      })
      .catch( error => {
        console.log('Error Getting Data: ', error);
      });
  }

###Extra:

Idealerweise möchten Sie dies nur in einer Entwicklungsumgebung haben, also erstellen Sie eine Variable auf Ihrer, um kugelsicher zu sein umwelt.ts Datei:

export const environment = {
  production: false,
  baseAPIUrl: 'http://localhost:4200/assets/data.json'
};

Ersetzen Sie dann die URL auf der http.get Pro ${environment.baseAPIUrl}.

Und der umwelt.prod.ts Datei kann die Produktions-API-URL haben.

Question 6

Legen Sie Ihre navItems.json Datei im Ordner „assets“. Angular weiß, wie man in den Assets-Ordner schaut. Also statt:

loadNavItems() {
    this.navItems = this.http.get("../data/navItems.json");
    console.log(this.navItems);
}

Ändern Sie den Pfad zu einfach:

loadNavItems() {
    this.navItems = this.http.get("assets/navItems.json");
    console.log(this.navItems);
}

Question 7

Erstellen/verschieben Sie die JSON-Datei im Ordner assets

Implementieren Sie eine Methode im Dienst

private URL = './assets/navItems.json'; // ./ is important!

constructor(private httpClient: HttpClient) {
}

fetch(): Observable<any> {
    return this.httpClient.get(this.URL);
}

Nennen Sie es in Komponente

private navItems: NavItems[];

constructor(private navItemsService: NavItemsService) { }

ngOnInit(): void {
  this.publicationService.fetch().subscribe(navItems => this.navItems = navItems);
}

Question 8

Wenn Sie die Antwort der Anfrage in die setzen möchten navItems. Weil http.get() ein Observable zurückgibt, müssen Sie es abonnieren.

Sehen Sie sich dieses Beispiel an:

// Version without map
this.http.get("../data/navItems.json")
    .subscribe((success) => {
      this.navItems = success.json();
    });

// With map
import 'rxjs/add/operator/map'
this.http.get("../data/navItems.json")
    .map((data) => {
      return data.json();
    })
    .subscribe((success) => {
      this.navItems = success;
    });