Angular/TypeScript：如何解决这个编译问题？答案

【问题标题】：Angular/TypeScript : How to resolve this compilation issue?Angular/TypeScript：如何解决这个编译问题？
【发布时间】：2018-03-15 10:14:36
【问题描述】：

地狱我是 Angular 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 server）时，我得到以下错误

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 的概念。如果您添加一个想法，它将对我有所帮助。谢谢

【问题讨论】：

标签： javascript angular typescript observable

【解决方案1】：

result 这里是一个 observable，你需要订阅它才能得到响应。

如下所示：

     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

【讨论】：

似乎是正确的。但是这条线上没有遗漏什么吗？ result.subscribe((response) => ????? ) {

【解决方案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)
    })

【讨论】：

我收到与原始代码相同的错误。 TS2339：此行的“响应”类型上不存在属性“密码”.map(user => user.password === password);
试试.get<any>('url/whatever') 理想情况下应该是.get<User>('url/whatever')
另外，我希望您使用HttpClient，它将处理JSON 处理和其他东西。

【解决方案3】：

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

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

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

【讨论】：