角Firebase数据订阅和获取错误

Question

My motive is to get userdetails from firebase 

我的firebase.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs';
import { Component } from '@angular/core';
import 'rxjs/add/operator/catch';
import { map, filter, switchMap } from 'rxjs/operators';
import 'core-js/es6/reflect';
@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  users : any;
  unreadBooks: Observable<any>;
  constructor(private db: AngularFireDatabase) { }

  getUserDetails(id) {
    console.log('in getUserDetails()'+id);

    this.users = this.db.object('/users/' + id).valueChanges();
    console.log('in getUserDetails()' + this.users.password);

    return this.users;
  }
}

我的login-component.ts

**import { Component, OnInit } from '@angular/core';
import { FirebaseService } from "../services/firebase.service";
import { User } from '../interfaces/user';
import { Observable } from 'rxjs';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { ActivatedRoute, Router } from "@angular/router";
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  users: Array<User> = [];
  username:any;
  password;
  constructor(private firebaseService: FirebaseService, private router: Router, private route: ActivatedRoute) {


  }
  ngOnInit() {
  }
  login() {
    this.firebaseService.getUserDetails(this.username).subscribe(user => {
      console.log('user name: ' + user.username);
    });
   }

}

我的login-component.html

<mat-toolbar>User  Login  </mat-toolbar>
<div class="add-book-form">
  <mat-card >

    <form (submit)="submitAdd()" #myForm="ngForm">
      <mat-form-field class="full-width">
        <input matInput placeholder="User name " [(ngModel)]="username" name="title" >
      </mat-form-field>
      <br />
      <mat-form-field class="full-width">
        <input matInput placeholder="Password" [(ngModel)]="password" name="password" >
      </mat-form-field>

      <br /><br />

            <mat-card-actions>
              <button (click)="login()" mat-raised-button color="warn" value="submit" [disabled]="!myForm.form.valid"> Login </button>

              <button mat-button mat-raised-button class="editButton" [routerLink]="['/Register']">  Reg</button>


            </mat-card-actions>
</form>
  </mat-card>
</div>

我的Firebase数据库

我在firebase中有数据库，如上图所示，我正在从service-componet.ts中获取数据，并将其包含在login.componet.ts中。我正在输入在login.componet.html页面中输入的用户名。虽然我在html页面中输入的用户名存在于firebase中，但是我没有得到未调用login-component.ts方法的用户。

Answer 1

您没有订阅。价值变化会返回一个承诺，您需要等待该承诺解决。

 getUserDetails(id) {
    console.log('in getUserDetails()'+id);
   this.db.object('/users/' + id).valueChanges().subscribe((user) => {
      console.log('in getUserDetails()' + user.password);
      this.user = user; <-- this will capture the value 
    });    
 }