如何从 firebase 检索和显示与特定用户配置文件相关的数据

Question

我是 angular 的新手。 通过遵循许多教程，我不知何故学会了如何从 firebase 到我的 angular 页面获取数据。 但是我不明白当用户登录到他的个人资料时如何将数据检索到特定的用户个人资料。

这些是我试图让这个东西工作的一些。 但我在所有这些尝试中都失败了从 firebase 检索用户配置文件数据并显示如何在不同的组件中显示单击的用户配置文件数据？

场地-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-venue-profile',
  templateUrl: './venue-profile.component.html',
  styleUrls: ['./venue-profile.component.scss']
})
export class VenueProfileComponent implements OnInit {

  users:Observable<any[]>;

  constructor(private db:AngularFirestore) {
    this.users = db.collection('register_user').valueChanges();
   }

  ngOnInit() {
  }

}

场地-profile.component.html

<div class="main-content">
      <div class="container-fluid">
        <h1 class="ml-1" *ngFor = 'let user of users | async'>{{ user.user_name }}</h1>
        <div class="row">  



        </div>
      </div>
    </div>

Answer 1

您可以使用snapshotChanges()方法从 firebase 获取数据。 这里我附上例子

app.component.ts

 // import service import { CrudService } from './services/crud.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(public crudService: CrudService) { } ngOnInit() { //get data from crud service this.crudService.getFFList().subscribe(data => { this.fflist = data.map(e => { return { id: e.payload.doc.id, ffdata: e.payload.doc.data(), }; }) }); } }

crud.service.ts

 import { Injectable } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; @Injectable({ providedIn: 'root' }) export class CrudService { constructor(private firestore: AngularFirestore) { } //method for get data from firebase with collection name ff_list getFFList() { return this.firestore.collection('ff_list').snapshotChanges(); } }

app.component.html

 <table> <thead> <th>id</th> <th>Short Form</th> <th>Full Form</th> <th>Action</th> </thead> <tbody> <tr *ngFor="let ff of fflist"> <td>{{ff.id}}</td> <td>{{ff.ffdata.ff_short}}</td> <td>{{ff.ffdata.ff_full}}</td> <td> <button (click)="delete(ff.id)">Delete</button> <button (click)="editFF(ff.id,ff.ffdata)">Edit</button> </td> </tr> </tbody> </table>