Question

我是新手。通过遵循许多教程，我以某种方式学习了如何将数据从Firebase获取到我的角度页面。但是我不明白当特定用户个人资料登录到该用户个人资料时如何检索数据。

这些是我为使此功能正常工作而尝试的一些方法。但是我在所有这些尝试中都失败了 Retrieving user profile data from firebase and displaying How to display clicked user profile data in a different component?

venue-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() {
  }

}

venue-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>

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

1 个答案: