Angular 6 - http.get не запущен - PullRequest
Новая
       9

Angular 6 - http.get не запущен

0 голосов
/ 16 октября 2018

Я тренировался на PrimeNG и создал сервис для получения данных из файла json.https://www.primefaces.org/primeng/#/treetable

Но невозможно получить данные json.

Метод вызывается из компонента с использованием: 

ngOnInit() {
  this.nodeService.getFileSystem().then(files => this.files = files);
}

Я использую этот метод в службе:

private filesystemUrl = 'http://localhost:4200/assets/data/filesystem.json';  

constructor(private http: HttpClient) { }

getFileSystem() {
  return this.http.get(this.filesystemUrl)
  .toPromise()
  .then(res => <TreeNode[]> res);
}

Консоль показывает:

ОШИБКА Ошибка: Uncaught (в обещании): Объект: {"body": {"error": "Данные коллекции" не найдены"}," url ":" http://localhost:4200/assets/data/filesystem.json","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Найдено "} в resolPromise (zone.js: 814) в resolPromise (zone.js: 771) в zone.js: 873 в ZoneDelegate.push ../ node_modules /zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (core.js: 3811) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 420) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188) на канале MicroTaskQueue (zone.js: 595) при нажатии../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js: 500) в ZoneTask.invoke (zone.js: 485)

Если я нажму всообщение консоли на "url": "http://localhost:4200/assets/data/filesystem.json" Я могу получить доступ к файлу json, поэтому он должен быть другимее проблема.Этот файл находится в "assets / data / filesystem.json", и я изменил angular.json: 

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/assets/data"
]

Самое странное, что на вкладке сети в браузере я неувидеть любой вызов get, который пытается получить доступ к этому json-файлу: 

localhost   304 document    vendor.js:100488    210 B   304 ms  
runtime.js  304 script  (index) 211 B   4 ms    
polyfills.js    304 script  (index) 212 B   6 ms    
styles.js   304 script  (index) 212 B   7 ms    
vendor.js   304 script  (index) 213 B   17 ms   
main.js 304 script  (index) 212 B   17 ms   
info?t=1539698839604    200 xhr zone.js:2969    367 B   2 ms    
websocket   101 websocket   sockjs.js:1683  0 B Pending

Я пробовал другие способы написания моего метода, например, этот, который выглядит нормально в моей IDE: 

getFileSystem() {
  return this.http.get(this.filesystemUrl)
  .pipe(map((response: Response) => {
    console.log(response.json());
    return response.json();
  }))
  .subscribe();
}

но затем, в методе компонента, вызывающем сервис, я не нашел способа изменить "then ()", потому что: свойство [then] then не существует для типа 'Subscription'.

Я также попробовал подобный метод обслуживания, с большими ошибками, отображаемыми в IDE для службы или компонента, все будет в порядке: 

getFileSystem() {
  return this.http.get<TreeNode[]>(this.filesystemUrl);
}

Но результат в консоли:

ОШИБКА {body: {…}, url: "http://localhost:4200/assets/data/filesystem.json", заголовки: HttpHeaders, status: 404, statusText:" Not Found "} body: {ошибка:" данные коллекции не найдены "} заголовки: HttpHeaders{normalizedNames: Map (0), lazyUpdate: null, lazyInit: ƒ} status: 404 statusText: «Not Found» url: «http://localhost:4200/assets/data/filesystem.json" proto :Объект

Если кто-нибудь может помочь?Большое спасибо!

1 Ответ

0 голосов
/ 16 октября 2018

Создайте свой сервис следующим образом: 

    private filesystemUrl = 'http://localhost:4200/assets/data/filesystem.json';  

constructor(private http: HttpClient) { }

getFileSystem(): Observable<TreeNode[]> {
  return this.http.get<TreeNode[]>(this.filesystemUrl);

}

Вы возвращаете Observable, и вы должны подписаться на него в своем компоненте: 

private treeNode: TreeNode[];
ngOnInit() {
  this.nodeService.getFileSystem().subscribe(data => {
     this.treeNode=data;
     console.log(data);
  });
}
...