如何使用AngularFirebase和Angular 7从用户集合中获取用户数据

npm install firebase @angular/fire --save

ng generate service firebase

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { User } from 'your-user-model'; // 根据你的用户模型调整导入路径

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  private usersCollection: AngularFirestoreCollection<User>;
  users$: Observable<User[]>;

  constructor(private afs: AngularFirestore) {
    this.usersCollection = this.afs.collection<User>('users');
    this.users$ = this.usersCollection.valueChanges();
  }

  getUsers(): Observable<User[]> {
    return this.users$;
  }
}

import { Component, OnInit } from '@angular/core';
import { FirebaseService } from 'path-to-your-firebase-service';
import { User } from 'your-user-model'; // 根据你的用户模型调整导入路径
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.users$ = this.firebaseService.getUsers();
  }
}

<div *ngFor="let user of users$ | async">
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
  <!-- 根据你的用户模型展示其他用户信息 -->
</div>