使用角度为2的http.get()从本地文件加载json

Question

我正在尝试以http.get()角度2 加载一个本地json .我尝试了一些东西,我在堆栈中找到了.它看起来像这样:

这是我的app.module.ts,我import的HttpModule和JsonModule来自@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 { }

在我的部分我import Http和Response从@angular/http.然后我有一个函数调用loadNavItems(),我尝试使用相对路径加载我的json并使用http.get()打印结果console.log().该函数调用于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);
    }
}

我的本地json文件如下所示:

[{
        "id": 1,
        "name": "Home",
        "routerLink": "/home-comp"
    },
    {
        "id": 2,
        "name": "Ü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"
    }
]

控制台中没有错误,我只是得到这个输出:

在我的html模板中,我想循环这样的项目:

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

我用堆栈中找到的解决方案制作了这个,但我不知道为什么它不起作用？

编辑相对路径: 我的相对路径也遇到了问题,但我肯定在使用时它是正确的../data/navItems.json.在屏幕截图中你可以看到nav-comp.component.ts,其中我使用json文件中的相对路径加载json,该文件位于名为data的文件夹中？怎么了,控制台打印出404错误,因为它无法从相对路径找到我的json文件？

Answer 1

编辑

对于Angular 5+,仅执行步骤1和4

要在Angular 2+中本地访问您的文件,您应该执行以下操作(4个步骤):

[1]在您的assets文件夹中创建一个.json文件,例如:data.json

[2]转到项目内的angular.cli.json(Angular 6+中的angular.json),在assets数组中放入另一个对象(在package.json对象之后),如下所示:

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

angular.cli.json的完整示例

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

请记住,data.json只是我们之前在assets文件夹中添加的示例文件(您可以根据需要为文件命名)

[3]尝试通过localhost访问您的文件.它应该在此地址中可见,http:// localhost:your_port/assets/data.json

如果它不可见而不是你做错了什么.在继续执行步骤#4之前,请确保您可以在浏览器的URL字段中键入它来访问它.

[4]现在预先形成一个GET请求来检索你的.json文件(你已经得到了你的完整路径.json URL,它应该很简单)

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

Answer 2

你必须改变

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

对于

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 loaded json in 
                        // console.
    }

因为this.http.get返回Observable<Response>并且您不想要响应,所以您需要其内容.

这console.log显示了一个可观察的,这是正确的,因为navItems包含一个Observable<Response>.

为了在模板中正确获取数据,您应该使用async管道.

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

这应该很好,有关更多信息,请参阅HTTP客户端文档

Answer 3

我自己的解决方案

我创建了一个新的component名为test此文件夹中:

我还创建了一个test.json在(重要)assests创建的文件夹中调用的模拟angular cli:

这个模拟看起来像这样:

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

在我的组件的控制器中,test import按照rxjs这样

import 'rxjs/add/operator/map'

这一点很重要,因为你要map你response从http get电话,所以你得到一个json和可以循环在你的ngFor.这是我的代码如何加载模拟数据.我使用http get并用这条路径调用了我的模拟路径this.http.get("/assets/mock/test/test.json").在此之后我map回应了subscribe它.然后我将它分配给我的变量items并ngFor在我的循环中循环它template.我也导出类型.这是我的整个控制器代码:

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

我的循环是template:

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

它按预期工作!我现在可以在assests文件夹中添加更多模拟文件,只需更改路径即可json.请注意,您还必须导入控制器中的HTTP和Response.app.module.ts(main)就像这样:

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 { }

Answer 4

我发现实现此目的的最简单方法是在folder：资产下添加file.json。

无需编辑： .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);
      });
  }

额外：

理想情况下，您只希望在开发环境中拥有此功能，以防万一。在您的上创建一个变量environment.ts

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

然后将http.get上的URL替换为${environment.baseAPIUrl}

并且environment.prod.ts可以具有生产API URL。

希望这可以帮助！

Answer 5

将navItems.json文件放入“assets”文件夹中。Angular 知道如何查看资产文件夹内部。所以而不是：

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

将路径更改为简单：

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