在Angular 2中使用http.get()从本地文件加载JSON内容。

49 浏览
0 Comments

在Angular 2中使用http.get()从本地文件加载JSON内容。

我正在尝试在Angular 2中使用http.get()加载本地JSON文件。我尝试了在Stack Overflow上找到的一个解决方案，代码如下：

这是我的app.module.ts文件，我从@angular/http中导入了HttpModule和JsonModule：

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

在我的组件中，我从@angular/http中导入了Http和Response。然后我有一个名为loadNavItems()的函数，在这个函数中我试图使用相对路径使用http.get()加载我的JSON内容，并用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"
    }
]

控制台没有任何错误，我得到的输出如下：

Enter image description here

在我的HTML模板中，我想像这样循环遍历项目：

我根据在Stack Overflow上找到的解决方案做了这个，但为什么它不起作用？

编辑相对路径：

我也遇到了相对路径的问题，但当我使用../data/navItems.json时，我确定它是正确的路径。在截图中，你可以看到nav-comp.component.ts文件，我正在使用相对路径从名为data的文件夹中加载JSON内容。有什么问题吗？控制台是否打印出404错误，因为它无法找到我的相对路径下的JSON文件？

Enter image description here

0