Я пытаюсь загрузить локальный json с http.get()
в угловом 2. Я попробовал что-то, что я нашел здесь в стеке. Это выглядит так:
это мой 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 файл из относительного пути?