I cannot display the Key element in the table

Asked

Viewed 67 times

0

The previous problem was solved, but now I need to list also the key of my objects, because after I changed the method in my file . ts from snapshotChanges() for valueChanges(), I can no longer connect the value of key to HTML, I’m trying to find a way to use both methods and list within the same table, because the ngFor does not allow me to pass more than one loop through.

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)

  }

}

How the page is: Página atual

json angular typescript firebase realtime-database

  • Location is an object. Logo You have to specify which attribute of this object you want to print. For example: {device.payload.Location.latitude}}

  • I have tried, but I get the following error: "Cannot read Property 'latitude' of Undefined"

  • When you console.log() in the object, what appears?

  • Do the following of a console.log(device); just below where you arrow the object and look in the browser log as this structured the name of attributes...

  • I’ll put up a picture of the console, just a moment

1 answer

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>

This way it should work.

Browser other questions tagged json angular typescript firebase realtime-database

You are not signed in. Login or sign up in order to post.