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”：“未找到集合'data'”}，“ url”：“ http：// localhost：4200 / assets / data / filesystem。 json “，”标头“：{” normalizedNames“：{}，” lazyUpdate“：null}，”状态“：404，” statusText“：”未找到“}在resolvePromise（zone.js：814）在.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在ZoneTask.invoke的push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask（zone.js：500）处的排水MicroTaskQueue（zone.js：595）处的.runTask（zone.js：188）（ 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'在'Subscription'类型上不存在。

我也尝试过这样的服务方法，没有在IDE中为服务或组件显示错误，那就可以了：

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

但是导致控制台：

错误{body：{…}，URL：“ http：// localhost：4200 / assets / data / filesystem.json ”，标头：HttpHeaders，状态：404，statusText：“ Not Found”}正文：{错误：“集合'data'not found“}}标头：HttpHeaders {normalizedNames：Map（0），lazyUpdate：空，lazyInit：ƒ}状态：404 statusText：“未找到” url：“ http：// localhost：4200 / assets / data / filesystem.json “ proto ：对象

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

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