web-dev-qa-db-ja.com

Angular 5ローカルの.jsonファイルを読むサービス

私はAngular 5を使用しており、Angular-Cliを使用してサービスを作成しました。

私がやりたいことはAngular 5のローカルjsonファイルを読み込むサービスを作成することです。

これは私が持っているものです...私は少し立ち往生しています...

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

  }

}

どうやってこれを完成させることができますか？

javascriptjsonangular
55
pedromartinez

最初にHttpClientとNot HttpClientModuleを注入する必要があります。次に.map((res:any) => res.json())を削除する必要がなくなります。新しいHttpClientはデフォルトでレスポンスの本体を提供するため、最後にHttpClientModuleをAppModuleにインポートします。 ：

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<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);
        });
   }
}
88
Bougarfaoui El houcine

あなたは直接あなたの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)
17
Nicolas Law-Dune

Webサーバからファイルを読むのではなく、ローカルファイルを実際に読む方法を探しているときにこの問題を発見しました。これを「リモートファイル」と呼びます。

requireを呼び出すだけです。

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

Angular-CLIのソースコードは私に影響を与えました。私は、templateUrlプロパティをtemplateに、そして値を実際のHTMLリソースへのrequire呼び出しに置き換えることによってコンポーネントテンプレートが含まれることを知りました。

AOTコンパイラを使用する場合は、tsconfig.app.jsonを調整してノードタイプ定義を追加する必要があります。

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

Angular 7の場合は、次の手順に従ってjsonデータを直接インポートしました。

Tsconfig.app.jsonで：

"resolveJsonModule": trueに"compilerOptions"を追加する

サービスまたはコンポーネントの場合：

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

その後

private example = exampleData;
6
jaycer
import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

詳細についてはこの記事を参照してください 。

4
Ole

これを試して

サービスにコードを書く

import {Observable, of} from 'rxjs';

jSONファイルのインポート

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

コンポーネント内

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}
0
user11426503