Nicht in der Lage, Daten von Firebase mit Schlüsseln in eckigen 2 - html, eckigen, Firebase, Firebase-Datenbank abrufen

Hallo, ich möchte die Daten von Firebase iterieren und muss sie in der Tabelle anzeigen.

Unten ist meine Firebase-Struktur. Ich möchte die Rechnung, E-Mail-ID und PO-Nummer in den Tabellen anzeigen. Ich kann die Daten in console.log sehen, aber sie werden nicht in Tabellen ausgefüllt.

EDI855

Gesetzesentwurf für

-L9ac7clRzSVT-EfGxYv: "123456789"

-L9acDp2k34qDpubJFr6: "123456780"

E-Mail-ID

-L9ac7cxYSALI3Ogj-nt: "test@gmail.com"

-L9acDp87NO83OQutasK: "test1@gmail.com"

Bestellnummer

-L9ac7cvtNNzg7hYa355: "123456789"

-L9acDp4PPOSo9VL9ysB: "VV002"

Unten ist meine HTML-Tabelle:

div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Bill To</th>
<th>Requested by</th>
<th>Po Number</th>
</tr>
</thead>
<tbody>
<tr>>
<td *ngFor="let x of items">{{x.$value}}</td>

</tr>
</tbody>
</table>

Unten ist mein Firebase-Code:

 constructor(public af: AngularFire) {
af.database.list("/EDI855").subscribe(x =>{
this.items=x;
console.log(this.items)
}

Antworten:

0 für die Antwort № 1

Versuchen Sie stattdessen, Ihre Abfrage im init-Ereignis zu implementieren

export class MyComponent implements OnInit {
items;

constructor(public af: AngularFire) {
}

ngOnInit() {
this.af.database.list("/EDI855").subscribe(x =>{
this.items=x;
}
}

Oder noch besser: Um die Echtzeitdatenbank optimal nutzen zu können, sollten Sie die Verwendung der async Rohr. Wenn Sie dies tun, reagiert Ihre App auf alle Änderungen an Ihren Daten und aktualisiert die Benutzeroberfläche sofort.

<td *ngFor="let x of items | async">{{x.$value}}</td>

Denken Sie nur daran, dass Sie in diesem Fall den Typ von ändern items (es ist nicht mehr die Liste der Elemente, sondern eine beobachtbare Liste von Elementen), als dass es nicht erforderlich ist, sie zu abonnieren. Das async Rohr erledigt die Arbeit.

constructor(public af: AngularFire) {
this.items = af.database.list("/EDI855");
}

---