[英]Angular 6 - http.get not launched
I training on PrimeNG and created a service to get data from a json file. 我对PrimeNG进行了培训,并创建了一项服务来从json文件中获取数据。 https://www.primefaces.org/primeng/#/treetable
https://www.primefaces.org/primeng/#/treetable
But impossible to get json data. 但是无法获取json数据。
The method is called from a component using : 使用以下方法从组件调用该方法:
ngOnInit() {
this.nodeService.getFileSystem().then(files => this.files = files);
}
I'm using this method in the service : 我在服务中使用此方法:
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);
}
The console shows : 控制台显示:
ERROR Error: Uncaught (in promise): Object: {"body":{"error":"Collection 'data' not found"},"url":" http://localhost:4200/assets/data/filesystem.json ","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found"} at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500) at ZoneTask.invoke (zone.js:485)
错误错误:未捕获(承诺):对象:{“ 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)
If I click in the console message on "url":" http://localhost:4200/assets/data/filesystem.json " I can access the json file so it should be another problem. 如果单击“ url”上的控制台消息:“ http:// localhost:4200 / assets / data / filesystem.json ”我可以访问json文件,因此应该是另一个问题。 This file is located in "assets/data/filesystem.json", and I modified angular.json :
该文件位于“ assets / data / filesystem.json”中,我修改了angular.json:
"assets": [
"src/favicon.ico",
"src/assets",
"src/assets/data"
]
The main strange is that in network tab in the browser, I don't see any get call that try to access this json file : 主要奇怪的是,在浏览器的“网络”选项卡中,我没有看到尝试访问此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
I've tried other ways to write my method, like this one that seems ok in my IDE : 我尝试了其他方法来编写我的方法,例如在IDE中似乎可以的这种方法:
getFileSystem() {
return this.http.get(this.filesystemUrl)
.pipe(map((response: Response) => {
console.log(response.json());
return response.json();
}))
.subscribe();
}
but then, in component method calling the service, I didn't find a way to change "then()" because : [ts] Property 'then' does not exist on type 'Subscription'. 但是,在调用服务的组件方法中,我没有找到更改“ then()”的方法,因为:[ts]属性'then'在'Subscription'类型上不存在。
I'v also tried the service method like this, withoud errors shown in IDE for service or component, it sould be ok : 我也尝试过这样的服务方法,没有在IDE中为服务或组件显示错误,那就可以了:
getFileSystem() {
return this.http.get<TreeNode[]>(this.filesystemUrl);
}
But result in console : 但是导致控制台:
ERROR {body: {…}, url: " http://localhost:4200/assets/data/filesystem.json ", headers: HttpHeaders, status: 404, statusText: "Not Found"} body: {error: "Collection 'data' not found"} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} status: 404 statusText: "Not Found" url: " http://localhost:4200/assets/data/filesystem.json " proto : Object
错误{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 :对象
If anyone can help ? 如果有人可以帮忙? Thanks a lot !
非常感谢 !
Create your service like this: 像这样创建您的服务:
private filesystemUrl = 'http://localhost:4200/assets/data/filesystem.json';
constructor(private http: HttpClient) { }
getFileSystem(): Observable<TreeNode[]> {
return this.http.get<TreeNode[]>(this.filesystemUrl);
}
You are returning an Observable and you must subscribe to it in your component: 您正在返回一个Observable,必须在组件中订阅它:
private treeNode: TreeNode[];
ngOnInit() {
this.nodeService.getFileSystem().subscribe(data => {
this.treeNode=data;
console.log(data);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.