在angular-cli中，'void'类型中不存在属性'subscribe'

Question

我是角色2的新手，并没有找到任何适当的答案来发布类似的问题。

我正在获取属性'subscribe'在angular-cli中的'void'类型中不存在。我尝试从rxjs导入订阅但没找到该库。

Error Image

请帮助解决此问题。请在下面找到我所称的服务和组件代码。

// ******************************* 

// login.service.ts

// ******************************* 

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/throw';

@Injectable()
export class LoginService {

  constructor(private http: Http) { }

  getLoginData(){
    this.http.get('./json/login.json')
      .map((result: Response) => result.json())
      .catch(this.getError);
  }

  private getError(error: Response): Observable<any>{
      console.log(error);
      return Observable.throw(error.json() || 'Server Issue');
  }

}

// ******************************* 

// login.component.ts

// ******************************* 


import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginService]
})
export class LoginComponent {
usernameModel: string;
passwordModel: string;
validLogin: Boolean;
  constructor(private router: Router, private loginService: LoginService) { }

  homeNav(){
    if(this.usernameModel === 'jay' && this.passwordModel === 'Jay'){
      this.validLogin = true;
      this.router.navigate(['/home']);
    }
    else{
      this.validLogin = false;
      console.log('Login Error');
    }

this.loginService.getLoginData()
  .subscribe(
    data => console.log(data)
  );

  }



}

Answer 1

您没有在getLoginData函数中返回observable。添加return关键字，并可选择将返回类型添加到签名：

getLoginData(): Observable<any>{
    return this.http.get('./json/login.json')
      .map((result: Response) => result.json())
      .catch(this.getError);
  }

Answer 2

您应该返回http来电，并确保始终添加类型提示以让您的IDE预先接收这些错误

getLoginData(): Observable<any> {
  return this.http.get('./json/login.json')
    .map((result: Response) => result.json())
    .catch(this.getError);
}