typescript zone.js:2969 GET http://localhost:4200/null 404（未找到）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50620475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
zone.js:2969 GET http://localhost:4200/null 404 (Not Found)
提问by Jitendra Ahuja
I m currently working on a very basic angular project using service.ts to get the http data from the .json file, but on running that, there is no CLI Error but the browser's console shows this :
我目前正在使用 service.ts 从 .json 文件中获取 http 数据的一个非常基本的角度项目，但在运行时，没有 CLI 错误，但浏览器的控制台显示：
zone.js:2969 GET http://localhost:4200/null404 (Not Found)
zone.js:2969 GET http://localhost:4200/null404（未找到）
Here is my app.module.ts
这是我的 app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ObservableComponent } from './observable/observable.component';
import { UserDataService } from './userdata.service';
@NgModule({
declarations: [
AppComponent,
ObservableComponent
],
imports: [
BrowserModule,
CarouselModule.forRoot(),
HttpModule
],
providers: [UserDataService],
schemas: [ NO_ERRORS_SCHEMA ],
bootstrap: [AppComponent],
})
export class AppModule { }
app.component.ts :
app.component.ts :
import { Component } from '@angular/core';
import { setTheme } from 'ngx-bootstrap/utils';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {
setTheme('bs4');
}
}
index.html :
索引.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Eshop</title>
<base href="/src">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html :
app.component.html :
<div>
<app-observable></app-observable>
</div>
userdata.service.ts :
用户数据.service.ts :
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs';
import { map } from "rxjs/operators";
import { catchError } from 'rxjs/operators';
import { Data } from './userdata';
import { throwError } from 'rxjs';
@Injectable()
export class UserDataService {
url : "http://localhost:4200/assets/data/userdata.json";
constructor(private http:Http) { }
getDataWithObservable() : Observable<Data[]>{
return this.http.get(this.url)
.pipe(
map(this.extractData),
catchError(this.handleErrorObservable)
);
}
private extractData(res: Response)
{
let body = res.json();
return body;
}
private handleErrorObservable (error: Response | any)
{
return throwError(error.message || error);
}
}
observable.component.html :
observable.component.html :
<br><h3>User Details with Observable</h3>
<ul>
<li *ngFor="let data of mydata | async" >
Id: {{data.id}}, Name: {{data.name}}
</li>
</ul>
<div *ngIf="errorMessage"> {{errorMessage}} </div> <br>
userdata.ts :
用户数据.ts ：
export class Data {
id: number;
name: string;
constructor() { }
}
observable.component.ts :
observable.component.ts ：
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserDataService } from '../userdata.service';
import { Data } from '../userdata';
@Component({
selector: 'app-observable',
templateUrl: './observable.component.html',
styleUrls: ['./observable.component.css']
})
export class ObservableComponent implements OnInit
{
ObservableData : Observable<Data[]>;
mydata : Data[];
errorMessage : String;
constructor(private userdataService: UserDataService) { }
ngOnInit(): void
{
this.ObservableData = this.userdataService.getDataWithObservable();
this.ObservableData.subscribe
(
mydata => this.mydata = mydata,
error => this.errorMessage = <any>error
);
}
}
userdata.json :
用户数据.json ：
[
{"id": 1, "name": "Hyman"},
{"id": 2, "name": "Maddy"},
{"id": 3, "name": "Hiten"},
{"id": 3, "name": "Jitendra"}
]
These are all my files of my project...
这些是我的项目的所有文件...
Can anybody suggest what should be done ?
有人可以建议应该做什么吗？
回答by firegloves
You are not correctly initializing url variabile. Consider that in TypeScript the syntax is:
您没有正确初始化 url 变量。考虑在 TypeScript 中的语法是：
varName: varType;
Change your userdata.service.ts according to this:
根据以下内容更改您的 userdata.service.ts：
@Injectable()
export class UserDataService {
private url: string;
constructor(private http: Http) {
this.url = 'http://localhost:4200/assets/data/userdata.json';
}
getDataWithObservable(): Observable<Data[]> {
return this.http.get(this.url)
.pipe(
map(this.extractData),
catchError(this.handleErrorObservable)
);
}
private extractData(res: Response)
{
let body = res.json();
return body;
}
private handleErrorObservable (error: Response | any)
{
return throwError(error.message || error);
}
}
Otherwise if you want to init directly url variable you can proceed like this:
否则，如果你想直接初始化 url 变量，你可以这样进行：
private url: string = 'http://localhost:4200/assets/data/userdata.json';
Or you can omit type definition like this:
或者你可以像这样省略类型定义：
private url = 'http://localhost:4200/assets/data/userdata.json';
Note that differently from your code the assignement is realized with =
请注意，与您的代码不同，分配是通过 =
