Angular 5 Dienst zum Lesen einer lokalen .json Datei

Ich bin mit Angular 5 und I've erstellt einen Dienst mit der angular-cli

Was ich tun möchte, ist, einen Dienst zu erstellen, der eine lokale json-Datei für Angular 5 liest.

Dies ist, was ich habe ... Ich'm ein bisschen stecken...

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

Wie kann ich das fertig bekommen?

dhilt
Bearbeitete Frage 28. Dezember 2017 в 11:38
Programmierung
javascript json angular
9. November 2017 в 4:28
1 Aufruf
Lösung

Zuerst müssen Sie HttpClient und nicht HttpClientModule injizieren, Zweitens müssen Sie .map((res:any) => res.json()) entfernen, da Sie es nicht mehr benötigen, da der neue HttpClient Ihnen standardmäßig den Body der Antwort liefert. Stellen Sie schließlich sicher, dass Sie HttpClientModule in Ihr AppModule importieren :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable {
        return this.http.get("./assets/mydata.json");
    }
}

um dies zu Ihrer Komponente hinzuzufügen:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}
Powkachu
Bearbeitete Antwort 15. April 2019 в 3:18
Kommentare (5)

Sie haben eine alternative Lösung, indem Sie Ihr json direkt importieren.

Um zu kompilieren, deklarieren Sie dieses Modul in Ihrer typings.d.ts-Datei

declare module "*.json" {
    const value: any;
    export default value;
}

In Ihrem Code

import { data_json } from '../../path_of_your.json';

console.log(data_json)
Kommentare (8)

Ich fand diese Frage bei der Suche nach einem Weg, um wirklich eine lokale Datei zu lesen, anstatt eine Datei vom Webserver zu lesen, die ich eher als "Remote-Datei" bezeichnen würde.

Rufen Sie einfach require auf:

const content = require('../../path_of_your.json');

Der Quellcode der Angular-CLI hat mich inspiriert: Ich habe herausgefunden, dass sie Komponenten-Templates einbinden, indem sie die Eigenschaft templateUrl durch template und den Wert durch einen require-Aufruf der eigentlichen HTML-Ressource ersetzen.

Wenn Sie den AOT-Compiler verwenden, müssen Sie die Node-Type-Definitionen hinzufügen, indem Sie tsconfig.app.json anpassen:

"compilerOptions": {
  "types": ["node"],
  ...
},
...
Kommentare (1)