Angular 6 - http.get 未启动

Question

我在 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);
}

控制台显示：

错误错误：未捕获（承诺）：对象： {"body":{"error":"收集'数据'不 找到"},"url":"http://localhost:4200/assets/data/filesystem.json","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"不是 成立”} 在 resolvePromise (zone.js:814) 在 resolvePromise (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) 在 drainMicroTaskQueue (zone.js:595) 在 push../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"
]

主要奇怪的是，在浏览器的网络选项卡中，我没有看到任何尝试访问此 json 文件的 get 调用：

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()”的方法，因为：[ts] 属性“then”在“订阅”类型上不存在。

我也试过这样的服务方法，IDE中没有显示服务或组件的错误，应该没问题：

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

但结果是控制台：

错误{正文：{…}，网址： “http://localhost:4200/assets/data/filesystem.json”，标题： HttpHeaders，状态：404，状态文本：“未找到”} 正文：{错误： “未找到集合'数据'”}标头：HttpHeaders {normalizedNames： 地图（0），lazyUpdate：空，lazyInit：ƒ}状态：404 statusText：“不是 找到”网址：“http://localhost:4200/assets/data/filesystem.json” 原型：对象

如果有人可以帮忙？非常感谢！

Answer 1

像这样创建你的服务：

    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);
  });
}