从 firebase 数据库中获取用户数据并在 table.html 中显示答案

【问题标题】：fetching user data from firebase database and displaying in component.html in a table从 firebase 数据库中获取用户数据并在 table.html 中显示
【发布时间】：2019-07-09 19:09:12
【问题描述】：

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

我应该导入一些库吗？我的 .ts 文件中究竟应该包含什么？我需要一个关于如何做到这一点的分步程序。我是初学者，刚刚学习 Angular。enter image description here

i dont know what the hell im doing

【问题讨论】：

如果答案有帮助，请告诉我

标签： angular typescript firebase

【解决方案1】：

我不确定您安装了什么来从 FireBase 获取数据，但请查看我假设您使用 AngularFire 的代码。

您应该按照此quick installation steps 设置基本模式，将文档作为Observable 读取并在组件模板中使用其数据。

在你的 student-user.component.ts 文件中：

  users: Observable<any>;

  constructor(private db: AngularFirestore) {
  }

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

在您的 HTML 模板中，打开 observable 并使用 *ngFor 指令循环 users 并根据提供的数据创建元素：

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

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

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

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

【讨论】：

谢谢你，Ethan，这确实帮助了我。我的代码现在可以工作了。它还有助于遵循 CRUD 方法教程。
很高兴来到这里，欢迎您，如果您发现它有帮助，您可以投票并纠正答案，谢谢
哈哈...我才刚刚开始在 stackoverflow 上活跃...我的声誉不会让我投票...

【解决方案2】：

//in my students.component.ts...

import { map} from 'rxjs/operators'
import {FirebaseService} from '../services/firebase.service';
import {Router} from '@angular/router';
import { AngularFirestore} from "angularfire2/firestore";


@Component({
  selector: 'app-student-user',
  templateUrl: './student-user.component.html',
  styleUrls: ['./student-user.component.scss']
})

/*from CRUD example*/
export class StudentUserComponent implements OnInit{
  students: any;
  students_data :any

  constructor(
    public firebaseService: FirebaseService,
    private router: Router,
    private db: AngularFirestore
  ) { }


 ngOnInit() {

  this.getStudents()

}


getStudents() {
  this.students_data = this.db.collection('User').snapshotChanges().pipe(map(changes => {

  return changes.map(a => {
  const data: any = a.payload.doc.data();
  data.id = a.payload.doc.id;
  return data;
  });
  })
  );

  this.students_data.subscribe(
  res => {
  console.log(res);
  this.students = res;
    //this.blogs_snapshot = res;
  }
  );

  }

} '



   //in my students.component.html...i used data binding

   <h1>LOGGED IN STUDENTS</h1>

   <div style="padding: 40px !important ; background: white !important">
      {{students|json}}
    </div> 

    <table class="ui compact celled definition table" style="margin-left: 200px; 
    width:700px">
        <thead class="full-width">
          <tr>
            <th></th>
            <th>Name</th>
            <th>Date of Account creation</th>
            <th>E-mail address</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let student of students ">
            <td class="collapsing">
              <div class="ui fitted slider checkbox">
                <input type="checkbox"> <label></label>
              </div>
            </td>
            <td>{{student.full_name}}</td>
            <td>{{student.created_at}}</td>
            <td>{{student.email}}</td>
            <td>{{student.gender}}/td>
          </tr>
        </tbody>

        <tfoot class="full-width">
          <tr>
            <th></th>
            <th colspan="4">
              <div class="ui right floated small primary labeled icon button">
                <i class="user icon"></i> Add User
              </div>
              <div class="ui small  button">
                Approve
              </div>
              <div class="ui small  disabled button">
                Approve All
              </div>
            </th>
          </tr>
        </tfoot>
      </table>'

//in my firebase.service.ts

'import { Injectable, OnInit } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService{

  constructor() { }
}

【讨论】：