O problema anterior foi solucionado, porém agora eu preciso listar também a key
dos meus objetos, pois depois que eu mudei o método no meu arquivo .ts de snapshotChanges()
para valueChanges()
, não consigo mais ligar o valor da key
ao HTML, estou tentando encontrar uma forma de utilizar ambos os métodos e listar dentro da mesma tabela, pois o ngFor
não me permite passar mais de um laço por onde percorrer.
HTML:
<div class="container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Data</th>
<th>Rota</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let device of devices_values | async">
<td>{{device.key}}</td>
<td>{{device.location.latitude}}</td>
<td>{{device.location.longitude}}</td>
<td>{{device.location.update}}</td>
<td>{{device.routes}}</td>
</tr>
</tbody>
</table>
</div>
.TS:
import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
import { Observable } from 'rxjs';
import 'firebase/database';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
devicesValues: AngularFireList<any>;
devicesKeys: AngularFireList<any>;
devices_values: Observable<any[]>;
devices_keys: Observable<any[]>;
constructor(db: AngularFireDatabase) {
this.devicesValues = db.list('/busao/devices');
this.devices_values = this.devicesValues.valueChanges()
this.devicesValues.valueChanges().subscribe(console.log)
}
}