извлечение пользовательских данных из базы данных firebase и отображение в файле component.html в таблице

Question

Я хочу получить пользовательские данные из базы данных в firebase и отобразить эти данные в таблицах HTML.

Должен ли я импортировать некоторые библиотеки? что именно я должен включить в мой файл .ts? Мне нужна пошаговая процедура о том, как это сделать. я новичок, и только изучаю Angular. введите описание изображения здесь

Я не знаю, что, черт возьми, я делаю

Answer 1

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

Answer 2

Я не уверен, что вы установили для получения данных из FireBase, но посмотрите на код, который, как я полагаю, вы использовали AngularFire .

Вы должны выполнить следующие шаги быстрой установки , чтобы настроить базовый шаблон для чтения документа как 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>

---

Кроме того, вы можете подписаться на Observable где-нибудь в вашем файле ts, чтобы развернуть данные, но вы должны отписаться от него во время ngOnDestroy(), чтобы избежать утечки памяти

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

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