Question

当有人注册时，我会将信息发布到我的后端。成功注册用户后，我得到一个{成功：真，msg：“用户注册”}的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);
    });

  }

Screenshot of error from ng serve

我刚开始使用Angular，更不用说后端了，所以，如果您能解释为什么发生此错误，将不胜感激。

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

Answer 1

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

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

假设您有一个充实的响应对象，只需用力键入即可：

{}

相反，如果您只需要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等。

Answer 2

属性“ 成功”在类型“ 对象”上不存在。将代码创建为：

// 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 });
    }
});

此更改可更正我在Angular ts 文件中的错误。

Answer 3

错误TS2339：类型“ Y”上不存在属性“ x”

是编译时错误。角HttpClient具有各种post函数声明，其中之一是：

post<T>(url: string, body: any | null, options?: { ... }): Observable<T>;

可以在此处强烈键入您的回复类型。您可以引入响应界面并像这样使用它：

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

import { Observable } from 'rxjs';

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

export interface RegisterResponse {
  success: boolean;
  msg: string;
}

@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): Observable<RegisterResponse> {
    return this.http.post<RegisterResponse>(this.baseUri + '/register', user, { headers: this.headers });
  }
}

那么从TypeScript编译器的角度来看，您将是类型安全的。

否则，匹配的声明将为：

post(url: string, body: any | null, options?: { ... }): Observable<Object>;

Object没有声明的属性succuess的地方，因此将导致该错误。

另一种避免这种情况的方法是使用as any或any，请参见下面的参考。但是通常，您希望TypeScript跟踪您的类型。

TypeScript是强类型的，这意味着它将尝试确保您使用的数据类型正确。因此，如果您尝试引用某些未知类型的属性，它将抱怨。

您可能还会看到：

以此类推。

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

3 个答案: