从Firebase数据库中获取用户数据并在表格的component.html中显示 [英] fetching user data from firebase database and displaying in component.html in a table

问题描述

我想从firebase的数据库中获取用户数据，并在HTML表中显示该数据.

i want to fetch user data from the database in firebase and display that data inside HTML tables.

我应该导入一些库吗?我的.ts文件应包括什么?我需要有关如何执行此操作的分步过程.我是一个初学者，只是学习Angular.在此处输入图片描述

should i be importing some libraries? what exactly should i include in my .ts file? i need a step by step procedure on how to do this. i am a beginner, and just learning Angular.enter image description here

我不知道我在做什么

推荐答案

我不确定要从FireBase中获取数据的安装内容，但请看代码，我假设您使用的是

I'm not sure what you had install to fetch data from FireBase but look at the code i assume that you used AngularFire.

您应按照以下快速安装步骤设置基本模式以读取文档作为可观察，并在组件模板中使用其数据.

You should follow this quick installation steps to set up the basic pattern to read a document as an Observable and use its data in a component template.

在student-user.component.ts文件中:

In your student-user.component.ts file:

  users: Observable<any>;

  constructor(private db: AngularFirestore) {
  }

  ngOnInit(){
      this.users = db.collection('users').valueChanges();
  }

在HTML模板中，您解开了可观察对象并使用

In your HTML template, you unwrap the observable and use *ngFor directive to loop over users and create elements base on the data provided:

<p *ngFor="let user of users | async"> {{user.userName}} </p>

---

或者，您可以在ts文件中的某个位置订阅Observable来解包数据，但是您应该在 ngOnDestroy()期间取消订阅它，以避免内存泄漏

---

Alternatively, you can subscribe to the Observable somewhere in your ts file to unwrap the data, but you should unsubscribe to it during ngOnDestroy() to avoid memory leak

 this.subscription = this.users.subscribe(console.log);

 ngOnDestroy() {
  this.subscription.unsubscribe();
 }

这篇关于从Firebase数据库中获取用户数据并在表格的component.html中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！