ошибка при загрузке и извлечении данных угловой базы

Question

My motive is to get userdetails from firebase 

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

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

}

my 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, как показано на рисунке выше, и я получаю данные из службыcomponentet.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 
    });    
 }