时间戳

首页 > 解决方案 > Angular 7 - HttpClient“对象类型上不存在属性'成功'”

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

问题描述

当有人注册时，我会将信息发布到我的后端。成功注册用户后，我收到 {success: true, msg: "User registered"} 的 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 的错误截图

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

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

标签： angulartypescript

解决方案

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

您的registerUser方法的返回类型是隐含的Object(or {})，因为这http.post就是返回的内容。http.post接受一个通用参数来定义将在响应中返回的body. 如果没有该参数，它将返回类型（因为，如果没有{}某种定义，JSON 只是一个未知数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, 等等。

推荐阅读