Как отобразить данные пользователя из Firebase в Angular?

Question

Есть ли только * ngFor для воспроизведения пользовательских данных? Я использую это для получения всех пользователей из database.but теперь мне нужно нажать кнопку и показать одну за другой детали из базы данных.

это мой файл items.services.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFireAuth } from 'angularfire2/auth';
import {AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ItemService {
 values: AngularFireObject<unknown>;
  userId: string;
}

constructor(private ebass: AngularFirestore, private db: AngularFireDatabase, private afAuth: AngularFireAuth)


  getItemsList() {
    this.values = this.db.object(`signup/${this.userId}`);
    return this.values;
  }

И это мой файл profile.component.ts. Я хочу получить детали по идентификатору пользователя и отобразить их в файле profile.component.html.

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import {ItemService} from '../../services/item.service';
import {SnapshotAction} from '@angular/fire/database';


@Component({
    selector: 'app-profile',
})

export class ProfileComponent implements OnInit {

  value: SnapshotAction<Item[]>;
  constructor(private itemService: ItemService, private afAuth: AngularFireAuth) {}

  ngOnInit() {
       this.itemService.getItemsList().snapshotChanges().subscribe(user => {
           this.value = user;
       });
    console.log(this.value);
  }
}

interface Item {
    id?: string;
    mail?: string;
    mobile?: string;
    land?: string;
    username?: string;
    firstname?: string;
  }

Answer 1

Попробуй вот так. вместо того, чтобы инициализировать значение как SnapshotAction, инициализируйте его как пустой массив или любой тип

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import {ItemService} from '../../services/item.service';
import {SnapshotAction} from '@angular/fire/database';


@Component({
    selector: 'app-profile',
})

export class Profile-component implements OnInit {

  value: [];
  constructor(private itemService: ItemService, private afAuth: 
  AngularFireAuth) {}

ngOnInit() {
    this.itemService.getItemsList().snapshotChanges().subscribe(user => {
       this.value = user;
   });
   console.log(this.value);
   }
}

interface Item {
    id?: string;
    mail?: string;
    mobile?: string;
    land?: string;
    username?: string;
    firstname?: string;
 }

в разделе html, попробуйте так:

<div class="list-group">  
    <div class="list-group" *ngFor="let item of value | async">
        <p>{{ item.payload.id | json}}</p> 
        <p>{{ item.payload.mail | json}}</p>
    </div>
</div>

Надеюсь, что это будетработа