在使用Angular 4时，Api后调用无法工作

Question

我在Angular 4中使用web api 2，我的post调用不工作不打api。问题是，它甚至没有给我一个错误。以下是我的代码

 registerUser() {
    this.confirmPasswordMessage = false;
    if (this.registerForm.valid) {
      this.confirmPasswordMessage = false;
         if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
             this.confirmPasswordMessage = true;
             this._progressBar.done();
             return false;
        }
        const _data = JSON.stringify(this._registerModel);
        this._apiService.postCall('Account/Register', _data).subscribe(resp => {
        }, error => () => {
          console.log(error); }, () => {
          });
    } else {
        return false;
    }
  }

这是我的api服务代码。

public postCall<T>(apiUrl: any, itemName: any): Observable<T> {
    const _options = { headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.getItem('access_token')
      }
    )};
      return this.http.post<T>(this.actionUrl + apiUrl, itemName, _options);
  }

这是我传递的json。当我通过postman运行这个json时，它击中了api。但我不明白为什么它不能从Angular应用中调用它。

"{"FirstName":"Kamran","LastName":"Khan","Email":"[email protected]","UserName":"kamrankhan","Password":"Kamran@786","ConfirmPassword":"Kamran@786"}"

api没有任何问题，它工作得很好，我用postman进行了测试。

Answer 1

我看到多个问题。

1. 移除 return false 里面 if 条件。它在HTTP请求发出之前从函数中返回。
2. 该 else 块是多余的。函数将以任何一种方式返回，而不考虑 if 声明是真实的还是不真实的。
3. 移除 JSON.stringify(). 你需要发送JSON，而不是一个字符串。
4. 在URL中添加一个前导斜杠。替换 'Account/Register' 与 '/Account/Register'.
5. 错误回调函数定义中的问题。这里 error 是函数的参数。你不能定义一个形式为 error => () => {}.
6. 通用类型变量 <T> 中的服务功能是多余的。这里没有使用它。

试试下面的方法

组成部分

registerUser() {
  this.confirmPasswordMessage = false;
  if (this.registerForm.valid) {
    this.confirmPasswordMessage = false;
    if (this._registerModel.Password.trim() !== this._registerModel.ConfirmPassword.trim()) {
      this.confirmPasswordMessage = true;
      this._progressBar.done();
      // no `return false;` here
    }
    this._apiService.postCall('/Account/Register', this._registerModel).subscribe(
      resp => { console.log(resp); }, 
      error => { console.log(error); }, 
      () => { console.log('complete'); }
    );
  }
}

服务项目

public postCall(apiUrl: any, itemName: any): Observable<any> {
  const _options = { 
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + localStorage.getItem('access_token');
    }
  )};
  return this.http.post(this.actionUrl + apiUrl, itemName, _options);
}

如果你是刚开始接触Angular，我建议你通过Angular的 教程 首先。它介绍了Angular的基本概念。