Question

我正在制作一个Web应用程序，其中有一个GitHub的授权按钮，该按钮可访问个人GitHub存储库。这些存储库将显示在Web应用程序上。

import {Component, OnInit} from '@angular/core';
import {DataService} from '../../services/data/data.service';
import {AuthService} from '../../services/auth/auth.service';
import {DatabaseService} from '../../services/share/database.service';
import {AuthdataDto} from '../../services/dto/authdata.dto';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-repositories',
  templateUrl: './repositories.component.html',
  styleUrls: ['./repositories.component.sass']
})
export class RepositoriesComponent implements OnInit {

  repositories: Object;
  authData: AuthdataDto;
  //loggedin: boolean;


  constructor(private data: DataService, public authService: 
     AuthService, private dbService: DatabaseService) { }

  ngOnInit() {
   this.getSomething().subscribe(data => { 
   this.data.getrepositories(this.authService.token, 
   this.authService.username)});
   }

   getSomething(){
     return this.dbService.getFromDatabase('user', 
      this.authService.userDetails.uid).pipe(
       map((data => {this.authData = data})));
    }
   }

this is the error i get 我正在尝试首先通过组件内的doSomething（）方法检索所有数据，然后完成ngOnInit（）方法应获取存储库。但是，那是行不通的。

有什么建议吗？

编辑：这是AuthService类。

import {Injectable} from '@angular/core';
import * as firebase from 'firebase';
import {AngularFireAuth} from 'angularfire2/auth';
import {Router} from '@angular/router';
import {Observable, throwError} from 'rxjs'; 
import {UserDto} from '../dto/user.dto';
import {DatabaseService} from '../share/database.service';
import {AuthdataDto} from '../dto/authdata.dto';

@Injectable({
  providedIn: 'root'
})
  export class AuthService {
  private _user: Observable<firebase.User>;
  private _userdata: UserDto;
  private _userDetails: firebase.User = null;

  private _username;
  private _token;

  constructor(private _afAuth: AngularFireAuth, private router: 
Router, private databaseService: DatabaseService) {
    this._user = _afAuth.authState;
    this._user.subscribe(
      (user) => {
        if (user) {
           this._userDetails = user;
        } else {
          this._userDetails = null;
        }
      }
    );
  }

  public loginwithGithub() {
    return new Promise<any>((resolve, reject) => {
      this.loginwithGithubProvider().then(
        res => {
          this.userdata = new 
UserDto().deserialize(JSON.parse(JSON.stringify(this.userDetails)));
          this.databaseService.pushToDatabase('user', 'tim', 
this.userdata);
          console.log(this.databaseService.getFromDatabase('user', 
'kevin'));
          resolve(res);
        }, err => {
          console.log(err);
          reject(err);
        });
    });
  }

  public loginwithGithubProvider(): 
Promise<firebase.auth.UserCredential> {
    return new Promise<any>((resolve, reject) => {
      this._afAuth.auth.signInWithPopup(
        new firebase.auth.GithubAuthProvider()).then(res => {
        const data = new AuthdataDto(res.additionalUserInfo.username, 
res.credential['accessToken'])
        this.databaseService.pushToDatabase('user', res.user.uid, 
data);
      }, err => {
        console.log(err);
        reject(err);
      });
    });
  }

  public logout(): Promise<boolean | Observable<never> | never> {
    return this._afAuth.auth.signOut()
      .then((res) => this.router.navigate(['/'])
        .catch((err) => throwError('signout failed')));
  }

  public get isLoggedIn(): boolean {
    return this._userDetails != null;
  }

  get user(): Observable<firebase.User> {
    return this._user;
  }

  get userDetails(): firebase.User {
    return this._userDetails;
  }


  get userdata(): UserDto {
    return this._userdata;
  }

  set userdata(value: UserDto) {
    this._userdata = value;
  }


  get token() {
    return this._token;
  }

  set token(value) {
    this._token = value;
  }


  get username() {
    return this._username;
  }

  set username(value) {
    this._username = value;
  }


  get afAuth(): AngularFireAuth {
    return this._afAuth;
  }

  set afAuth(value: AngularFireAuth) {
this._afAuth = value;
  }
    }

Answer 1

检查您的.subscribe（）。如果您近距离观看，可能会发现“数据” 显示为灰色，表示从未使用过。

Answer 2

错误似乎很明显，“无法读取null的属性'uid'” 在“ getSomething”内部，您正在调用“ this.authService.userDetails.uid”，其中“ userDetails”为空，您可以检查“ userDetails”是否具有值吗？

编辑

在您的服务中，您获得用户，但用户为null，因此您也将userDetails设置为null，请看这里：

this._user.subscribe(
  (user) => {
    if (user) {
       this._userDetails = user;
    } else {

      // Put a breakpoint here
      this._userDetails = null;
    }
  }

编辑2

好吧，我建议您公开_user或创建一个代表原始_user可观察到的新主题（但这已经通过设置“ _user = afAuth.authState”来完成）；

如果执行此操作，您将能够知道可观察对象的状态，然后在调用其他方法之前等待检索到“用户”数据。

您可以像这样使用“ switchMap”运算符：

组件

getSomething(){
 return this.authService.user$.pipe(
  switchMap(userData => 
      this.dbService.getFromDatabase('user', userData.uid)),
  map(data => {this.authData = data}));
}

}

在这里大理石=> https://rxviz.com/v/0oqMeYwo

角度检索数据问题（无法读取null的属性'uid'）

2 个答案: