“用户”类型上不存在属性“状态”

Question

我正在开发一个个人项目，Angular 6 作为我的客户，Laravel 5.6 作为我的 API，我无法理解我的身份验证服务发生了什么。

在某些情况下：我想实现jwtAuth 来管理我的用户身份验证并且它运行良好（我已经使用 Postman 测试了 api 端点）。现在，这是我的注册功能：

public function register(RegisterFormRequest $request)
    {
        $user = new User;
        $user->username = $request->username;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();

        return response()->json([
            'status' => 'success',
            'message' => '¡Usuario registrado!',
            'user' => $user
        ], 200);
    }

如您所见，此函数返回一个包含状态、消息和用户信息的 json。在客户端，这是我的auth.service.ts“注册用户”功能：

registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
      );
  }

如果一切顺利，它会返回与我在 API 中定义的完全相同的 json。最后，在我的register.component.ts 中，这是我用来实现该服务功能的功能：

onSubmit() {
    this.authService.registerUser(this.user).subscribe(
      response => {
        swal({
          type: response.status,
          text: response.message,
          footer: 'Usted será redirigido hacia el formulario de ingreso.',
          showConfirmButton: false,
          showCloseButton: false,
          showCancelButton: false,
          allowEscapeKey: false,
          allowOutsideClick: false,
        });
      }
    );
  }

就这样，它不起作用，因为它抛出了下一个错误：

Property 'status' does not exist on type 'User'.

顺便说一下，这是我的user 课程：

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
}

我认为它与response.message 的作用相同，我认为它与Observable 处理程序有关，但我不明白它是如何工作的。如果我将它们删除到代码行中，一切正常......我该如何解决这个问题？

PD：对不起我的英语不好！

Answer 1

您必须为您的用户类型添加状态：

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
  status: string;
}

否则你可以从你的服务中返回 Observable。

registerUser(user: User):Observable<Any> {
    return this.http.post<Any>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
    );
}

Answer 2

这是因为你的函数 registerUser 正在返回一个 User 类型的可观察对象：

registerUser(user: User):Observable<User>

当你调用它时：

registerUser(this.user).subscribe(
  response => {
    swal({
      type: response.status,

response 应该是User 类型（因为您已经指定了它），所以将您的返回类型更改为 Angular http 响应或任何，然后响应将能够具有状态属性:)

Answer 3

您将响应投射给用户，而实际上它是您在 api 上创建的响应类型：

}
  status: string
  message: string
  user: User
}

因此，如果您不关心状态字段或消息字段，只需将响应映射为仅返回用户即可。

//Create a response type or interface or class
export interface RegisterUserResponse {
  status: string
  message: string
  user: User
}



registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e)),
        map((resp: RegisterUserResponse) => {
          return resp.user; //this should satisfy 'this.http.post<User>'
        })
      );
}