Angular 6 Http Subscribe issue: Property 'userInfo' does not exist on type 'Response'

Question

I am using angular6

Service.ts

post(url, body, options): Observable<Response>{
        let headers = new Headers();
        this.createAuthorizationHeader(headers);
        return this.http.post(this.endpoint + url, body, httpOptions)
        .pipe(map(this.parseData))
        .pipe(catchError(this.handleError));
    }

loginService.ts

login(data) {
        return this.httpClient.post('api/authenticate', data , {
            'Content-Type': 'application/x-www-form-urlencoded'
        });
    }

login.ts

onSubmit() {
        if(this.loginForm.invalid) {
            return;
        }else{
            let data = {
                'email': this.loginForm.value.email,
                'password': this.loginForm.value.password
            }
            this.loginService.login(data).subscribe(
                response => {

console.log(response.userInfo.name);

                this.myRoute.navigate(['dashboard']);
            },
            error =>{
                console.log(error);
            }
        )
    }
}

I am getting error Property 'userInfo' does not exist on type 'Response'. but in my http response i am {"status":true,"userInfo":{"id":1,"email":"admin@admin","password":"123456","type":"admin","name":"Admin"},"message":"su"}

I even tired remove my map function i am still getting the same error for the subscribe function. Angular 2 i am not getting this kind of issue. Post update to angular 6 i am getting this issue i even updated import { map, catchError, tap } from 'rxjs/operators'; the import file.

Sorry bad english. Any update or insight is appreciated. Thanks

Answer 1

您可以使用response['userInfo']默认响应没有名为userInfo的属性，您可以将响应类型强制转换为给定类型或执行上述操作。

Answer 2

If I guess correctly from the question, the error is raised at compile time. Did you define correctly a Response type ? It should look like

type Response = {
  status: boolean,
  userInfo: {id: number, email: string, password: number, type: string, name: string},
  message: string};

Or, if you are going to use your post() function for other types of requests, define a more generic post function in your service, as follows:

post(url, body, options): Observable<any> { ...