Angular 7 - HttpClient "Property ' 成功'在对象类型上不存在“

Question

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

---

这是来 self 的 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);
    });

  }

Screenshot of error from ng serve

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

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

Answer 1

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

您的 registerUser 方法的返回类型隐式为 Object(或 {})，因为这就是 http.post 回来了。 http.post 接受一个通用参数来定义响应的 body 中返回的内容。如果没有该参数，它将返回 {} 类型(因为，如果没有某种定义，JSON 只是一个未知的 Object)...和 ​​ 的键{} 上不存在成功。

假设您有一个充实的响应对象，只需强类型化它:

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等