Разобрать данные json из внутреннего файла json с помощью ошибки Angular throwns

Question

Я пытался получить JSON из внутреннего файла JSON в угловых.

с этой услугой (village.service):

import { Injectable, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs'
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class RecordsService {

data: any;

  constructor(private http: Http) { }

  getVillages(id) {
 return this.http.get('../assets/data/villages.json')
    .map(data => {
       this.data = data.json();
       return data.json();
    }, err => {
    if (err) {
      return err.json();
    }
  });
  }

}

и под commponet я положил:

ngOnInit() {

this.getVillages();

....
}

и здесь, чтобы загрузить как цепочку выпадающего

  onSubDistrictSelected(subDistrictId: number) {
    if (subDistrictId) {
      this.onLoading.emit(true);
      this.customer.subDistrict = this.subDistricts.filter(c => (c.id == subDistrictId))[0].name;
      this.customer.sdid = subDistrictId;
      this.customer.subDistrictId = subDistrictId;
      this.villages = this.getVillages().filter((item) => {
      return item.subDistrictId === Number(subDistrictId)
      });
      this.onLoading.emit(false);
    }
  }

Я получил сообщение об ошибке при компиляции: this.getVillages не является функцией, но работает правильно, если я поместил значение json в файл компонента:

getVillages() {
    return [
      { json_data}
      ]
    }

Чего я хочу добиться, так это того, что я хочу использовать файл JSon, а не помещать его непосредственно в commponet.

Спасибо

Answer 1

getVillages - это метод в службе, поэтому вам необходимо создать экземпляр службы перед ее использованием.

Сначала вам нужно указать RecordsService в модуле, например,

app.module.ts

...
providers : [
    RecordsService
]
...

А в вашем компоненте

abc.component.ts

constructor(public recordService : RecordsService) {
}

ngOnInit() {
   this.recordService.getVillages();
}

Дайте мне знать, если вы все еще получаете ошибку или у вас есть какая-то другая ошибка.

EDIT :

getVillages() возвращает Observable, поэтому вам необходимо подписаться, чтобы использовать возвращаемые данные.

this.recordService.getVillages().subscribe( data => {
    console.log(data);
} )