web-dev-qa-db-ja.com

Angular 2-外部ファイルからのJSONデータでローカル変数を埋める方法

Angular 2つのチュートリアル私はapp.component.tsファイルで場所変数を直接読みました。例えばvar BAR以下、{Foo}インターフェイス。

import {Component} from 'angular2/core';
import {Foo} from './foo';

@Component({
   etc.
});

export class AppComponent {
   bar = BAR;
}

var BAR: Foo[] = [
   { 'id': 1 },
   { 'id': 2 }
];

ただし、ローカルJSONファイルにはBARのデータがあります。 {HTTP_PROVIDER}が必要だとは思わない。外部ファイルからJSONデータを取得するにはどうすればよいですか？

jsonangular
22
ebakunin

このコンテンツでファイルを作成する

export const BAR= [ { 'id': 1 }, { 'id': 2 } ];

BarConfig.tsなどの名前で保存します

後で次のように使用します

import { BAR } from './BarConfig'; let bar= BAR;

さらに良いことに、必要な場所で直接BARを使用します

12
William Ardila

HTTP_PROVIDERは、httpを使用してファイルをロードする場合に必要です。

Httpを介してローカルjsonファイルをロードする方法の例を次に示します。

this.result = {friends:[]};
this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);

詳細はこちら： http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

5
TGH

Justeは、.jsonファイルを静的フォルダー（angular cli）を使用している場合は/ assets）に配置し、機能するはずです。

4
Nacim Idjakirene

最適なオプションは、jsonファイルを作成し、jsonの詳細をファイル内に保存し、以下のようにそのファイルを呼び出すことです。

Angular-cliを使用している場合jsonファイルをAssetsフォルダー（app dirと平行）ディレクトリー内に保持します

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

注：ここでは、assets/json/oldjson.jsonのようなassetsフォルダー内のパスのみを指定する必要があり、次に/json/oldjson.jsonのようなパスを記述する必要があります

Webpackを使用している場合、パブリックフォルダー内の上記と同じ構造に従う必要があります。これはアセットフォルダーに似ています。

3
Vijay Gajera

Angular2でHttpプロバイダーを使用できます

確認してくださいローカルjsonファイルをwwwフォルダーに配置します。

getLocalFile(){
    return this.http.get('./localFileName.json').
        map(res => res.json());
}

これにより、ローカルJSONファイルが返されます。

1
Deepu Varghese