Question

地狱我是角5的新手。我正在创建一个登录和身份验证服务。但我无法编译我的代码。这是我的代码

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


}

当我编译（ng服务器）时，我收到以下错误

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

第28行是：if(result.password==password){

我不知道自己错过了什么？我试着理解Observable的概念。如果你添加一个想法，它将帮助我。感谢

Answer 1

result这里是一个可观察的，您需要订阅它以获得响应。

如下所示：

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

您可以查看这篇精彩的文章：https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Answer 2

正确使用Observables
使用HttpClient，而不是旧Http
您还可以定义User类，以使输入更严格。

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

Answer 3

您正在尝试访问从http调用返回的observable。要获得可观察信息，您必须订阅它。

有关热获取远程数据的详细信息，请阅读： https://angular.io/guide/http

注意：您不应使用已弃用的angular / http。请使用angular / common / http。

Angular / TypeScript：如何解决此编译问题？

3 个答案: