typescript - ดึงข้อมูลจาก Firebase ใน ngFor ของ Angular 6 โดยไม่ใช้ AngularFire

ฉันกำลังใช้ Angular6 และ Firebase (ติดตั้ง Firebase ด้วย npm) ฉันต้องการแสดงรายการผู้ใช้ของฉันในเทมเพลตด้วย ngFor นี่คือขั้นตอนของฉัน:

ts :

constructor( ) {
var  users = new Promise((resolve, reject)=>{
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        firebase.database().ref('users').on('value',(data) =>
              resolve(data.val())     
      );
    }
  });
})

เอชทีเอ็มแอล

<tbody>
    <tr *ngFor="let user of users; let i = index">
        <td> {{user.nom}}</td>
        <td>{{user.prenom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td>{{user.nom}}</td>
        <td></td>
        <td> <button (click)="onViewUser(i)" class="btn btn-primary"> 
                                        Rôle</button></td>
    </tr>     
</tbody>

ไม่มีอะไรปรากฏในตารางของฉัน ไม่มีข้อความแสดงข้อผิดพลาดบนคอนโซล

คำตอบ #1

มีบางสิ่งที่ควรสังเกตในตัวอย่างโค้ดของคุณ

คุณไม่ควรใส่ตรรกะลงใน constructor ของ Angular Component คุณควรใช้ lifecycle hooks เช่น ngOnInit ซึ่งจะทำงานหลังจากที่คอมโพเนนต์ถูกเริ่มต้นแล้ว

public users;

ngOnInit() {
  firebase.auth()
    .onAuthStateChanged(user => {
      if (user) {
        firebase.database().ref('users')
          .on('value', data => {
            this.users = data.val();
          });
      }
    });
}

การตั้งค่า var ภายใน constructor ไม่ได้ทำให้มันเป็นตัวแปรที่สามารถเข้าถึงจาก view ของคุณได้ แทนที่จะทำเช่นนั้นคุณต้องใช้ this.users

ควรห่อโต๊ะของคุณด้วย ngIf เพราะ ngFor จะเกิดข้อผิดพลาดหาก users ไม่ถูกกำหนด

<ng-template [ngIf]="users">
  <tbody>
    <tr *ngFor="let user of users; let i = index">
      <td>{{user.nom}}</td>
      <td>{{user.prenom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td>{{user.nom}}</td>
      <td></td>
      <td> 
        <button (click)="onViewUser(i)" class="btn btn-primary">Rôle</button>
      </td>
    </tr>     
  </tbody>
</ng-template>

ท้ายที่สุดแล้ว มีแพ็กเกจที่ยอดเยี่ยม angularfire2 ซึ่งเป็นตัวห่อ/ไลบรารีสำหรับ Angular เพื่อรวมกับ Firebase มันทำงานหนักมากให้คุณและทำให้สิ่งต่าง ๆ ง่ายขึ้นเล็กน้อยเมื่อเขียนโปรแกรมโปรเจกต์ Angular ลองดูสิ มันคุ้มค่าที่จะใช้เวลาในการใช้งาน