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