Question

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

我应该导入一些库吗？我的.ts文件应包括什么？我需要有关如何执行此操作的分步过程。我是一个初学者，只是学习Angular。enter image description here

Answer 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模板中，您解开了可观察对象，并使用*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();
 }

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

从Firebase数据库中获取用户数据并在表格的component.html中显示

2 个答案: