首页 文章

属性'status'在类型'User'上不存在

提问于
浏览
0

我正在使用 Angular 6 作为我的客户端和 Laravel 5.6 作为我的API进行个人项目,我无法理解我的auth服务发生了什么 .

对于某些上下文:我想实现 jwtAuth 来管理我的用户身份验证并且它运行正常(我已经使用Postman测试了api endpoints ) . 现在,这是我的注册功能:

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 "register user"函数:

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:抱歉我的英文不好!

3 回答

  • 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))
        );
    }
    
  • 1

    这是因为你的函数 registerUser 正在返回一个 User 类型的observable:

    registerUser(user: User):Observable<User>
    

    当你打电话给它时:

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

    response 应该是 User 类型(因为你已经指定了它),所以将你的返回类型更改为Angular http响应或任何然后响应将能够具有status属性:)

  • 1

    您正在将响应转换为用户,当它实际上是您在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>'
            })
          );
    }
    

相关问题