对于Angular 5+，仅预成型步骤1和4

为了在Angular 2+ 中本地访问您的文件，您应该执行以下操作（4 个步骤）：

[1]在您的资产文件夹中创建一个.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只是我们之前在资产文件夹中添加的示例文件（您可以随意命名您的文件）

[3]尝试通过本地主机访问您的文件。它应该在这个地址中可见，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));

你必须改变

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返回 anObservable<Response>并且您不想要响应，所以您想要它的内容。

在console.log你展示了一个可观察到的，这是正确的，因为navItems包含Observable<Response>。

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

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

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

我自己的解决方案

我在这个文件夹中创建了一个新的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 { }

我发现实现这一点的最简单方法是在文件夹下添加file.json：assets。

无需编辑： .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。

希望这可以帮助！

将您的 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);
}