ERROR TypeError:无法读取属性' json'未定义的

时间:2017-12-17 19:25:43

标签: javascript angular typescript observable console.log

请帮助我理解并解决此错误:

我试图从本地服务器获取数据,因此我在控制台中看到此错误:

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

1 个答案:

答案 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'));
}