javascript - บริการ Angular 5 เพื่ออ่านไฟล์ .json ภายในเครื่อง

ฉันกำลังใช้ Angular 5 และฉันได้สร้างบริการโดยใช้ angular-cli

สิ่งที่ฉันต้องการทำคือการสร้างบริการที่อ่านไฟล์ json ภายในเครื่องสำหรับ Angular 5

นี่คือสิ่งที่ฉันมี... ฉันติดขัดเล็กน้อย...

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));

  }

}

ฉันจะทำให้เสร็จนี้ได้อย่างไร?

คำตอบ #1

อันดับแรกคุณต้องฉีด HttpClient ไม่ใช่ HttpClientModule สิ่งที่สองคุณต้องลบ .map((res:any) => res.json()) คุณจะไม่ต้องใช้มันอีกต่อไปเพราะ HttpClient ใหม่จะให้เนื้อหาของการตอบสนองโดยค่าเริ่มต้น สุดท้ายให้แน่ใจว่าคุณนำเข้า HttpClientModule ใน AppModule ของคุณ

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

@Injectable()
export class AppSettingsService {

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

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

เพื่อเพิ่มสิ่งนี้ลงในคอมโพเนนต์ของคุณ:

@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);
        });
   }
}

คำตอบ #2

สำหรับ Angular 7 ฉันได้ทำตามขั้นตอนเหล่านี้เพื่อนำเข้าข้อมูล json โดยตรง:

ในไฟล์ tsconfig.app.json:

เพิ่ม "resolveJsonModule": true ใน "compilerOptions"

ในบริการหรือคอมโพเนนต์:

import * as exampleData from '../example.json';

แล้วก็

private example = exampleData;

คำตอบ #3

คุณมีทางออกอีกทางหนึ่ง คือ การนำเข้า json ของคุณโดยตรง

ในการคอมไพล์ ให้ประกาศโมดูลนี้ในไฟล์ typings.d.ts ของคุณ

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

ในโค้ดของคุณ

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

console.log(data_json)

คำตอบ #4

ฉันเจอคำถามนี้เมื่อกำลังมองหาวิธีอ่านไฟล์ท้องถิ่นจริงๆ แทนการอ่านไฟล์จากเว็บเซิร์ฟเวอร์ ซึ่งฉันอยากเรียกว่า "ไฟล์ระยะไกล"

เพียงเรียก require:

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

ซอร์สโค้ดของ Angular-CLI เป็นแรงบันดาลใจให้ฉัน: ฉันพบว่าพวกเขารวมเทมเพลตของคอมโพเนนต์โดยการแทนที่คุณสมบัติ templateUrl ด้วย template และค่าโดยการเรียก require ไปยังทรัพยากร HTML จริง

ถ้าคุณใช้คอมไพเลอร์ AOT คุณต้องเพิ่มการกำหนดประเภทโหนดโดยปรับ tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

คำตอบ #5

สมมติว่าคุณมีไฟล์ data.json ในโฟลเดอร์ src/app ของโครงการของคุณโดยมีค่าดังต่อไปนี้:

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    ...
]

3 วิธีในการอ่านไฟล์ JSON ภายในเครื่อง

วิธีที่ 1: การอ่านไฟล์ JSON ท้องถิ่นโดยใช้คำสั่ง import ของ TypeScript 2.9+

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

วิธีที่ 2: การอ่านไฟล์ JSON ภายในโดยใช้ Angular HttpClient

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';
  products: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data =>{
      console.log(data);
      this.products = data;
    })
  }
}

วิธีที่ 3: การอ่านไฟล์ JSON ท้องถิ่นในแอป Angular แบบออฟไลน์โดยใช้คำสั่ง import ของ ES6+

แต่ก่อนอื่นเราจำเป็นต้องเพิ่มไฟล์การพิมพ์ดังนี้:

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

เพิ่มสิ่งนี้ลงในไฟล์ใหม่ json-typings.d.ts ในโฟลเดอร์ src/app

ตอนนี้คุณสามารถนำเข้าไฟล์ JSON ได้เหมือนกับ TypeScript 2.9 ขึ้นไป

import * as data from "data.json";