http.post angular 2不能调用webapi

时间:2018-02-08 19:25:15

标签: angular asp.net-web-api angular-http

我尝试调用api,API未触发,我没有返回错误。 我正在使用角度5和asp.net mvc 5,api在邮递员触发时正常工作。没有想法,有什么问题,你能帮助我吗?我是角和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];

  }
}

2 个答案:

答案 0 :(得分:1)

在您的组件中,试试这个

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

答案 1 :(得分:0)

这对我有用:

 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()
  {


  }
}