Angular 7 - HttpClient“类型对象上不存在属性‘成功’”

Question

当有人注册时，我会将信息发布到我的后端。成功注册用户后，我收到 {success: true, msg: "User Registration"} 的 json 响应。我的问题是当我尝试执行 if 语句来检查成功是否设置为 true 时。

这是我的代码不起作用：

    // Register User
    this.apiService.registerUser(user).subscribe(data => {
      if(data.success) {
        this.flashMessage.show('Registration successful', { cssClass: 'alert-success', timeout: 3200 });
      } else {
        this.flashMessage.show('Registration failed', { cssClass: 'alert-danger', timeout: 3200 });
      }
    });

---

我能够 console.log 数据的响应，它返回：

{success: true, msg: "User registered"}

---

这是我的 ApiService 中的代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/User';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUri: string = 'http://localhost:5000/api';
  private headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private http: HttpClient) { }

  registerUser(user: User) {
    return this.http.post(this.baseUri + '/register', user, { headers: this.headers });
  }
}

---

这是我的注册组件中的代码：

onRegisterSubmit() {
    const user: User = {
      firstName: this.firstName,
      lastName: this.lastName,
      email: this.email,
      username: this.username,
      password: this.password
    };

// Register User
    this.apiService.registerUser(user).subscribe(data => {
      console.log(data);
    });

  }

ng serve 错误截图

我对使用 angular 还很陌生，更不用说后端了，所以如果你能解释为什么会发生这个错误，我将不胜感激。

如果您需要更多信息，请告诉我。

Answer 1

这是一个编译器错误，这也是 Typescript 很棒的原因之一！

您的registerUser方法的返回类型隐式是Object(or {})，因为这http.post就是返回的内容。http.post接受一个通用参数来定义将在响应的body. 如果没有该参数，它将返回类型{}（因为，没有某种定义，JSON 只是一个 unknown Object）......并且 的键success不存在于{}。

假设您有一个充实的响应对象，只需强输入它：

interface UserPostResponse {
  success: boolean
}

...

  registerUser(user: User): Observable<UserPostResponse> {
    return this.http.post<UserPostResponse>(this.baseUri + '/register', user, { headers: this.headers });
  }

相反，如果你想要它HttpRequest本身而不是身体，你只需要告诉HttpClient观察响应的哪一部分：

  registerUser(user: User): Observable<HttpResponse<object>> {
    return this.http.post(this.baseUri + '/register', user, { headers: this.headers }, observe: 'response');
  }

...和HttpResponse有status，statusText，body，等。