0

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)

  }

}

Como a página está: Página atual

5
  • Location é um objeto. Logo Você tem que especificar qual atributo desse objeto vc quer imprimir. Por exemplo: {{device.payload.location.latitude}}
    – Andre
    14/02/2020 às 13:53
  • Já tentei, mas eu recebo o seguinte erro: "Cannot read property 'latitude' of undefined"
    – Fire Zero
    14/02/2020 às 14:42
  • Quando você da console.log() no objeto, o que aparece? 14/02/2020 às 17:09
  • Faz o seguinte da um console.log(device); logo abaixo de onde você seta o objeto e olha no log do navegador como esta estruturado o nome dos atributos...
    – Andre
    14/02/2020 às 17:09
  • Vou colocar uma foto do console, só um momento
    – Fire Zero
    14/02/2020 às 17:09

1 Resposta 1

0
 <tbody>
  <tr *ngFor="let device of devices_values; let i = index | async">
    <td>{{i+1}}</td>
    <td>{{device.location.latitude}}</td>
    <td>{{device.location.longitude}}</td>
    <td>{{device.location.update}}</td>
    <td>{{device.routes}}</td>
  </tr>
</tbody>

Desta maneira deve funcionar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .