【问题标题】:Property 'asOservable' does not exist on type 'User'“用户”类型上不存在属性“asOservable”
【发布时间】:2020-04-11 19:28:29
【问题描述】:

我有一个auth.service.ts 文件如下:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

import { User } from '../shared/user';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg-service.service';

interface RegResponse {
  status: string;
  success: string;
}

interface AuthResponse {
  status: string;
  success: string;
  token: string;
}

interface UserResponse {
  user: User;
  status: string;
  success: boolean;
}

interface JWTResponse {
  status: string;
  success: string;
  user: any;
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  tokenKey = 'JWT';
  isAuthenticated: Boolean = false;
  username: Subject<string> = new Subject<string>();
  authToken: string = undefined;
  user: User;

   constructor(private http: HttpClient,
     private processHTTPMsgService: ProcessHTTPMsgService) {
   }

   checkUserExistence(user : User) : any {
    this.http.get<UserResponse>(baseURL + 'users/findUser')
    .subscribe(res => {
      if(res.success){
        console.log('user founded!');
        return true;
      }
    },
    err => {
      console.log('A problem happened: ', err);
      this.destroyUserCredentials();
      return false;
    });
  }

   checkJWTtoken() {
     this.http.get<JWTResponse>(baseURL + 'users/checkJWTtoken')
     .subscribe(res => {
       console.log('JWT Token Valid: ', res);
       this.sendUsername(res.user.username);
     },
     err => {
       console.log('JWT Token invalid: ', err);
       this.destroyUserCredentials();
     });
   }

   sendUsername(name: string) {
     this.username.next(name);
   }

   clearUsername() {
     this.username.next(undefined);
   }

   loadUserCredentials() {
     const credentials = JSON.parse(localStorage.getItem(this.tokenKey));
     console.log('loadUserCredentials ', credentials);
     if (credentials && credentials.username !== undefined) {
       this.useCredentials(credentials);
       if (this.authToken) {
        this.checkJWTtoken();
       }
     }
   }

   storeUserCredentials(credentials: any) {
     console.log('storeUserCredentials ', credentials);
     localStorage.setItem(this.tokenKey, JSON.stringify(credentials));
     this.useCredentials(credentials);
   }

   useCredentials(credentials: any) {
     this.isAuthenticated = true;
     this.sendUsername(credentials.username);
     this.authToken = credentials.token;
     this.user = credentials.user;
   }

   destroyUserCredentials() {
     this.authToken = undefined;
     this.clearUsername();
     this.isAuthenticated = false;
     localStorage.removeItem(this.tokenKey);
   }

   storeUser(username: any) {
    console.log('storeUser ', username);
    //localStorage.setItem(this.username, JSON.stringify(username));
    //this.useCredentials(credentials);
  }


   signUp(user: any): Observable<any> {
    if (this.checkUserExistence(user) === false) {
      return this.http.post<RegResponse>(baseURL + 'users/signup',
      {'username': user.username, 'password': user.password})
      .pipe( map(res => {
          this.storeUser({username: user.username});
          return {'success': true, 'username': user.username };
      }),
       catchError(error => this.processHTTPMsgService.handleError(error)));

    }
    else{
      console.log('This user already exists!')
    }

  }


   logIn(user: any): Observable<any> {
     return this.http.post<AuthResponse>(baseURL + 'users/login',
       {'username': user.username, 'password': user.password})
       .pipe( map(res => {
           this.storeUserCredentials({username: user.username, token: res.token });
           return {'success': true, 'username': user.username };
       }),
        catchError(error => this.processHTTPMsgService.handleError(error)));
   }

   logOut() {
     this.destroyUserCredentials();
   }

   isLoggedIn(): Boolean {
     return this.isAuthenticated;
   }

   getUsername(): Observable<string> {
     return this.username.asObservable();
   }



   getToken(): string {
     return this.authToken;
   }
}

我正在尝试添加一个函数,该函数将注册的user 作为返回值返回。

   getUser(): Observable<User> {
    return this.user.asOservable();
  }

但我收到此错误消息:

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

这也是我的User类:

export class User {
    _id: string;
    username: string;
    firstname: string;
    lastname: string;
    password: String;
    admin: boolean;

}

问题是什么,我该如何解决?

【问题讨论】:

  • 只是一个错字??它应该是.asObservable - 而不是.asOservable(你在O 之后缺少b .....)

标签: angular service properties observable


【解决方案1】:

asObservableSubject 类的方法。要从自定义类型返回 observable,您可以使用 of 方法。试试下面的

getUser(): Observable<User> {
  return of(this.user);
}

但是,这将立即发出 this.user 值并完成。

如果您希望在每次有新用户可用时获取user,则应将其声明为类似于usernameSubject(或BehaviorSubject)。

user = new Subject<User>();

useCredentials(credentials: any) {
  ...
  this.user.next(credentials.user);
}

getUser(): Observable<User> {
  return this.user.asOservable();
}

【讨论】:

  • 非常感谢,您能详细解释一下主题吗?或者给我一些简单易学的教程?
  • 如果你从 Rxjs 开始,我建议从这里开始:learnrxjs.io/learn-rxjs/subjects。它有很好的例子。之后在网上可以找到多篇好文章。
  • 你也可以在 github 中查看 Subject 源代码。
  • 你也可以看到这个问题stackoverflow.com/questions/61119340/…也许你也可以在那里解决我的问题。
  • 你可以在它的 cmets 中找到我的完整项目。
猜你喜欢
  • 1970-01-01
  • 2021-01-21
  • 2020-12-11
  • 2021-01-09
  • 2021-07-10
  • 2021-06-27
  • 2020-03-12
  • 1970-01-01
相关资源
最近更新 更多