http.post angular 2不調用webapi

Question

我嘗試調用api，但未觸發API，我沒有返回錯誤。 我使用的是angular 5和asp.net mvc 5，當由郵遞員觸發時，api正常工作。 不知道，有什么問題，您能幫我嗎？ 我是angular和webapi的初學者。

請參閱我的角度服務：

@Injectable()
    export class LoginService {

      private urlPrefix = 'http://localhost:51871/Api/Login/Login';
      headers: Headers = new Headers ({'Content-Type':'application/json'});
      options: RequestOptions = new RequestOptions({ headers: this.headers });

      constructor(private http: Http)  { 

      }

      ValidarLogin(credenciais: Credenciais): Observable<RetornoAutenticacao[]>{

        let body = JSON.stringify(credenciais);

        return this.http.post(this.urlPrefix, body, this.options )
        .map((response: Response) => <RetornoAutenticacao[]>response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
    }

     handleError(error: Response) {
              console.error(error);
              return Observable.throw(error.json().error || 'Server error');
          }
    }

看我的班級模型：

export class RetornoAutenticacao{
   UsuarioAtenticado : Boolean;
   Mensagem : string;
}

export class Credenciais{
    login: string;
    senha: string;
}

看到我的組件：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  login: string = 'teste';
  senha: string = 'teste';
  credenciais: Credenciais = new  Credenciais();
  menssagem: Observable<RetornoAutenticacao[]>;
  text:any;
  constructor(private _loginService: LoginService) { 


  }


  ngOnInit() {
    debugger
    this.credenciais.login = this.login
    this.credenciais.senha = this.senha
    this.menssagem = this._loginService.ValidarLogin(this.credenciais);
    this.text = this.menssagem[1];

  }

  ngOnchange()
  {
    this.credenciais.login = this.login
    this.credenciais.senha = this.senha
    this.menssagem = this._loginService.ValidarLogin(this.credenciais);
    this.text = this.menssagem[1];

  }
}

Answer 1

在您的組件內部，嘗試一下

this.menssagem = this._loginService.ValidarLogin(this.credenciais)
  .subscribe(
    res => { 
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
);

Answer 2

對我來說就是這樣：

 ValidarLogin(credenciais: Credenciais): Observable<RetornoAutenticacao>{

    let body = JSON.stringify(credenciais);

    return this.http.post(this.urlPrefix, body, this.options)
    .map(res => res.json()).catch(err => Observable.throw(this.handleError(err)))
}

 handleError(error: Response) {
          console.log(error)
          return Observable.throw(error.json().error || 'Server error')
      }
}

和組件

export class LoginComponent implements OnInit {

  login: string = 'teste';
  senha: string = 'teste';
  credenciais: Credenciais = new  Credenciais();
  private menssagem: RetornoAutenticacao = new RetornoAutenticacao();

  constructor(
    private _loginService: LoginService,
    private http: Http) {}

  getLogin() {
    this._loginService.ValidarLogin(this.credenciais).subscribe(resp =>  this.menssagem ={ Menssagem: resp['Menssagem'] ,
    UsuarioAtenticado: resp['UsuarioAtenticado']

  });

  }

  ngOnInit() {
    debugger
    this.credenciais.login = this.login
    this.credenciais.senha = this.senha
     this.getLogin()

  }
  ngOnchange()
  {


  }
}