请帮助我理解并解决此错误:
我试图从本地服务器获取数据,因此我在控制台中看到此错误:
ERROR TypeError: Cannot read property 'json' of undefined
(" Postman"浏览器获取并正确显示响应)
完整的错误:Screeshot console error
我使用Angular 4.3.1
我的代码如下所示:
服务
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Http, RequestOptionsArgs, Response} from '@angular/http';
import {ResponseContentType} from '@angular/http/src/enums';
export class User {
constructor(public id: number,
public name: string,
public age: number,
public occupation: string) {
}
}
@Injectable()
export class UserService {
private userUrl = 'http://localhost:8000/api/v1/';
constructor(private http: Http) {
}
getUsers(name?: string): Observable<User[]> {
return this.http.get(`${this.userUrl}users`, {params: {name}})
.map((res: Response) => { return res.json() })
.catch((error: any) => Observable.throw(error.json().error ||
'Server error'));
}
COMPONENT
import 'rxjs/add/operator/switchMap';
import {Observable} from 'rxjs/Observable';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, ParamMap} from '@angular/router';
import {User, UserService} from './user.service';
import {FormControl} from '@angular/forms';
@Component({
templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
users: Observable<User[]>;
public search: FormControl = new FormControl();
constructor(private service: UserService) {
}
ngOnInit() {
this.users = this.search.valueChanges
.startWith('')
.debounceTime(800)
.distinctUntilChanged()
.switchMap(name => this.service.getUsers(name));
}
}
答案 0 :(得分:0)
从我在屏幕截图中看到的内容中,您在从服务器检索数据时遇到了一些问题。由于这个原因,你陷入了catch分支,试图在空错误上做一个json。
检查您的服务器以及在呼叫失败时它没有返回错误的原因。这可能会让您知道为什么对API的调用不起作用。
但是根据你最初的问题,这与观察者的成功分支中的响应无关。你的代码是正确的。您必须弄清楚为什么对您的API的调用失败。
修改强>
仔细观察一下,我发现你的请求格式不正确,你应该做类似
的事情getUsers(name?: string): Observable<User[]> {
let myParams = new URLSearchParams();
myParams.append('name', name);
let options = new RequestOptions({ params: myParams });
return this.http.get(`${this.userUrl}users`, options)
.map((res: Response) => { return res.json() })
.catch((error: any) => Observable.throw(error.json().error ||
'Server error'));
}