CODEWITHSUNDEEP
javascriptangulartypescriptobservable
Pracede
Pracede

Reputation: 4371

Angular/TypeScript : How to resolve this compilation issue?

Hell I ma new in angular 5. I am create a login and auth service. But i cannot compile my code. Here is my code 

// user.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
  private loggedIn = false;

  constructor(private http: Http) {
  //  this.loggedIn = !!localStorage.getItem('auth_token');
  }

//authenticate user with dummy logic because i use a json-server
  authenticate(login:string, password:string) {
    console.log('Authenticate ....');
    const credentials = {login:login, password:password};
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    var result = this.http
      .get(
        '/users?login?'+JSON.stringify(login),
        { headers }
      );

      if(result.password==password){
        return true;
      }
      return false;
    }


}

When i compile ( ng server ) i get the following error 

ERROR in src/app/auth/user.services.ts(28,17): error TS2339: 
Property 'password' does not exist on type 'Observable<Response>'.

Line 28 is : if(result.password==password){

I don't know what i am missing ?I try to understand the Observable concept. If you add an idea, it will help me. Thanks

Upvotes: 1

Views: 139

Answers (3)

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

result here is an observable, you need to subscribe to it to get response.

Something like below: 

     var result = this.http.get(
                   '/users?login?'+JSON.stringify(login),
                    { headers }
     ); 
     //result is an observer here, you have to subscribe to it
     result.subscribe((response) =>  {
           if(response.password==password){
                     return true;
           }
           return false;
      });

You can check this awesome article: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Upvotes: 2

sabithpocker
sabithpocker

Reputation: 15566

  1. Use Observables properly
  2. Use HttpClient, not old Http
  3. You can also define a User class to make typing more strict.
  // user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
  private loggedIn = false;

  constructor(private http: HttpClient) {
  //  this.loggedIn = !!localStorage.getItem('auth_token');
  }

  //authenticate user with dummy logic because i use a json-server
  authenticate(login:string, password:string) :Observable<boolean> {
    return this.http
      .get('url/whatever') //returns a User object having password
      .map(user => user.password === password); // maps result to the desired true or false value
  }
}

// to consume the service from a component, for example

this.userService.authenticate('myusername', 'mypassword')
    .subscribe(authenticated => {
        console.log('login status', authenticated)
    })

Upvotes: 1

ochs.tobi
ochs.tobi

Reputation: 3454

You are trying to access the observable returned from the http call. To get the information in the observable you have to subscribe to it.

For detailed information about hot to get remote data please read this: https://angular.io/guide/http

NOTE: You should not use the deprecated angular/http. Use angular/common/http instead.

Upvotes: 0

Related Questions