错误:在Angular中解析期间Http失败 [英] Error : Http failure during parsing in Angular
本文介绍了错误:在Angular中解析期间Http失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在学习Angular,我想在HTML页面上显示JSON数据.错误是在Angular中解析期间Http失败.我不知道为什么请告诉我我的错误并给我链接如何显示几种类型的JSON数据
I'm learning Angular, I want to display JSON data on HTML page. The error is Http failure during parsing in Angular. I don't know why please tell me my mistake and give me links how to display JSON data with several types
person.component.html
<ul>
<li *ngFor="let address of addresses">FirstName:{{ persons.addresses.City }}</li>
</ul>
person.json
person.json
[{
"Addresses": [{
"AddressId":101,
"AddressTypes":["permanent", "temporary", "careof", "native"],
"Address-L1":"space",
"Address-L2":"a.b.road",
"Locality":"airoli(east)",
"City":"Mumbai",
"State":"Maharashtra",
"Country":"India",
"Postalcode":400027
}],
"ContactNumbers" :
[
{
"ContactID": 1,
"ContactType": "Home",
"CountryCode": "+91",
"RegionCode": "022",
"Number":2656568965
}]
}]
person-list.service.ts
person-list.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
// import 'rxjs/add/operator/do'; // for debugging
export class Address{
AddressId:number;
City:string="";
}
/**
* This class provides the NameList service with methods to read names and add names.
*/
@Injectable()
export class PersonListService {
/**
* Creates a new NameListService with the injected HttpClient.
* @param {HttpClient} http - The injected HttpClient.
* @constructor
*/
constructor(private http: HttpClient) {}
/**
* Returns an Observable for the HTTP GET request for the JSON resource.
* @return {string[]} The Observable for the HTTP request.
*/
get(): Observable<Address[]>{
console.log("Inside the get service")
return this.http.get('app/person/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
/**
* Handle HTTP error
*/
private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
const errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}
person.component.ts
@Component({
moduleId: module.id,
selector: 'sd-person',
templateUrl: 'person.component.html',
styleUrls: ['person.component.css']
})
export class PersonComponent implements OnInit {
errorMessage: string;
addresses: Address[]=[];
constructor(public personListService:PersonListService){}
ngOnInit() {
// console.log(jwt.AuthConfig);
this.getperson();
}
getperson(){
this.personListService.get()
.subscribe(
addresses => this.addresses = addresses,
error => this.errorMessage = <any>error
);
console.log(this.persons);
}
}
推荐答案
在您的 person-list.service.ts 文件中,将响应转换为JSON.
In your person-list.service.ts file convert the response into JSON.
将响应映射到JSON.
Map the response to JSON.
return this.http.get('app/person/person.json')
.map(response => response.json())
// .do(data => console.log('server data:', data))
.catch(this.handleError);
否则,您可以转换组件本身的响应.
Or else you can convert the response from component itself.
这篇关于错误:在Angular中解析期间Http失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文