Я использую угловой 5 и я'ве создали сервис, с помощью углового-Кинк
То, что я хочу сделать, это создать сервис, который читает локальный файл JSON для угловой 5.
Это то, что я ... Я'm немного застрял...
import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClientModule) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
Как я могу закончить?
Сначала вы должны вставить с помощью HttpClient", а не " HttpClientModule, второе, что вы должны удалить
.карту((РЭС:любой) => РЭС.формат JSON())вы выиграли'т это нужно больше, потому что новый HttpClient, который даст вам тело ответа по умолчанию , наконец, убедится, что импорт
HttpClientModuleв
модуль`
:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AppSettingsService {
constructor(private http: HttpClient) {
this.getJSON().subscribe(data => {
console.log(data);
});
}
public getJSON(): Observable<any> {
return this.http.get("./assets/mydata.json");
}
}
чтобы добавить это к вашему компонента:
@Component({
selector: 'mycmp',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
constructor(
private appSettingsService : AppSettingsService
) { }
ngOnInit(){
this.appSettingsService.getJSON().subscribe(data => {
console.log(data);
});
}
}
У вас есть альтернативное решение, импортировать непосредственно в JSON.
Для компиляции, объявить этот модуль в свой typings.д.файл TS
declare module "*.json" {
const value: any;
export default value;
}
В коде
import { data_json } from '../../path_of_your.json';
console.log(data_json)
Для угловой 7, я следовал за этими шагами, чтобы напрямую импортировать данные JSON:
В tsconfig.приложение.в JSON:
добавить в "resolveJsonModule-то": true
в "и компилятора параметры"
в
В службе или компонента:
import * as exampleData from '../example.json';
А потом
private example = exampleData;
Я нашел этот вопрос, когда искал способ, чтобы действительно прочитать локальный файл вместо чтения файла с веб-сервера, которые я'д, а позвонить и "удаленный файл".
Просто позвоните требуют
:
const content = require('../../path_of_your.json');
Угловые-интерфейс командной строки исходного кода вдохновил меня: я узнал, что они включают в себя шаблоны компонент, заменив свойство templateUrl
купить шаблон
и значение называть требуют
, чтобы фактический HTML-код ресурса.
Если вы используете компилятор АОТ вам нужно добавить узел типа таких определений путем корректировки tsconfig.приложение.формат JSON
:
"compilerOptions": {
"types": ["node"],
...
},
...
Попробуйте Это
Написать код в вашей службе
import {Observable, of} from 'rxjs';
импортируйте файл в формате JSON
import Product from "./database/product.json";
getProduct(): Observable<any> {
return of(Product).pipe(delay(1000));
}
В компонент
get_products(){
this.sharedService.getProduct().subscribe(res=>{
console.log(res);
})
}
Давайте создадим файл JSON, мы называем его навигации.JSON можно назвать его, что вы хотите!
навигации.в JSON
[
{
"href": "#",
"text": "Home",
"icon": ""
},
{
"href": "#",
"text": "Bundles",
"icon": "",
"children": [
{
"href": "#national",
"text": "National",
"icon": "assets/images/national.svg"
}
]
}
]
Теперь мы создали файл JSON с данными меню. Мы пойдем в приложение компонент файла и вставьте ниже код.
приложение.компонент.ТС
import { Component } from '@angular/core';
import menudata from './navbar.json';
@Component({
selector: 'lm-navbar',
templateUrl: './navbar.component.html'
})
export class NavbarComponent {
mainmenu:any = menudata;
}
Теперь ваши угловые приложения 7 готов служить данные из локального файла JSON.
Перейти к app.component.html и вставьте следующий код в нем.
app.component.html
<ul class="navbar-nav ml-auto">
<li class="nav-item" *ngFor="let menu of mainmenu">
<a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
<ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0">
<li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li>
</ul>
</li>
</ul>
Используя машинопись 3.6.3, и угловой 6, ни одно из этих решений работал для меня.
Что сделал ** работа была следовать учебник здесь, который говорит, что вы должны добавить небольшой файл, называемый `njson-typings.д.ТС для вашего проекта, которое содержит:
declare module "*.json" {
const value: any;
export default value;
}
Как только это было сделано, я мог бы просто импортировать жестко JSON-данных:
import employeeData from '../../assets/employees.json';
и использовать его в мой компонент:
export class FetchDataComponent implements OnInit {
public employees: Employee[];
constructor() {
// Load the data from a hardcoded .json file
this.employees = employeeData;
. . . .
}