Angular 财产'；状态'；不存在于类型'；用户'；

我正在做一个个人项目，客户是

Angular 6

，API是

Laravel 5.6

，我无法理解我的auth服务到底发生了什么

对于某些上下文：我想实现

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

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

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

如您所见，此函数返回一个json，其中包含状态、消息和用户信息。在客户端，这是我的

auth.service.ts

“注册用户”功能：

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

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

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'.

顺便说一下，这是我的

用户

课程：

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

我假设它对

response.message的作用也一样，我认为它与
可观察的
处理程序有关，但我不理解它是如何工作的。如果我把这些代码移到代码行中，一切都会正常工作。。。我怎样才能解决这个问题

对不起，我的英语不好
 这是因为您的函数
registerUser
正在返回类型为
User
的可观察对象：

registerUser(user: User):Observable<User>

response
应该是
User
类型（因为您已经指定了它），所以将返回类型更改为Angular http response或any，然后response将能够具有status属性：）
这是因为您的函数
registerUser
正在返回类型为
User
的可观察值：

registerUser(user: User):Observable<User>

response
应该是类型
User
（因为您已经指定了它），所以将返回类型更改为Angular http response或any，然后response将能够具有status属性：）
您必须将状态添加到您的用户类型：

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

registerUser（用户：用户）：可观察{
返回this.http.post（`${this.url}/register`，user，httpOptions）
.烟斗(
捕捉错误（（e：响应）=>投掷者（e））
);
}
您必须向用户类型添加状态：

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

registerUser（用户：用户）：可观察{
返回this.http.post（`${this.url}/register`，user，httpOptions）
.烟斗(
捕捉错误（（e：响应）=>投掷者（e））
);
}
您正在向用户发送响应，而实际上是您在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>'
        })
      );
}

//创建响应类型、接口或类
导出接口注册表响应{
状态：字符串
消息：string
用户：用户
}
registerUser（用户：用户）：可观察{
返回this.http.post（`${this.url}/register`，user，httpOptions）
.烟斗(
catchError（（e:Response）=>throwError（e）），
map（（resp:RegisterUserResponse）=>{
return resp.user；//这应该满足'this.http.post'
})
);
}
您正在向用户发送响应，而实际上是您在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>'
        })
      );
}

//创建响应类型、接口或类
导出接口注册表响应{
状态：字符串
消息：string
用户：用户
}
registerUser（用户：用户）：可观察{
返回this.http.post（`${this.url}/register`，user，httpOptions）
.烟斗(
catchError（（e:Response）=>throwError（e）），
map（（resp:RegisterUserResponse）=>{
return resp.user；//这应该满足'this.http.post'
})
);
}
尝试console.log（reponse）并查看什么returnIt显示了我正在返回的json尝试console.log（reponse）并查看什么returnIt显示了我正在返回的json所以，像这样使用可观察对象是完全可以的？@EnriqueBermúdez yesSo，像这样使用可观察对象完全没问题？@EnriqueBermúdez yesI实际上关心消息和状态，我想在我的swal函数中显示它们！我实际上关心消息和状态，我希望在我的swal函数上显示它们！根本不需要使用Observable？您需要Observable类型来获得订阅完成和检查，但您可以使用HttpReport from angular
Observable
或
Observable
来绕过类型检查根本不需要使用Observable？您需要Observable类型来获得订阅完成和检查，但是您可以从角度
Observable
或
Observable
使用HttpReponse绕过类型检查