Как организовать JSON информацию внутри таблицы? - PullRequest
Новая
       31

Как организовать JSON информацию внутри таблицы?

0 голосов
/ 13 февраля 2020

Первая проблема была решена, благодаря моим хорошим друзьям, которые ответили на мой вопрос и дали мне лучшие решения, но теперь я сталкиваюсь с новой «проблемой»

Я создал таблицу, чтобы показать данные в формате JSON, но я все еще хочу организовать и разделить данные, содержащиеся в JSON

Вот как это выглядит прямо сейчас:

Фактическая таблица

И вот как я хочу показать информацию:

Таблица целей

Это код HTML: 

<div class="container">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Latitude</th>
        <th>Longitude</th>
        <th>Inf. Data</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let device of devices | async">
          <td>{{device.key}}</td>
          <td>|-8.8780555725098|</td>
          <td>|-36.463222503662|</td>
          <td>2019-05-07T07:42:31Z</td>
          <!--<td>{{device.key}}</td>
          <td>{{device | json}}</td>
          <td><button (click)="getCurrentDevice(device)" mat-button>More</button></td>-->
      </tr>
    </tbody>
  </table>
</div>

И файл .ts: 

import { Component } from '@angular/core';
import { AngularFireDatabase } from "angularfire2/database";
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  devices: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    let list = db.list('/busao/devices');
    this.devices = list.snapshotChanges()
    list.snapshotChanges().subscribe(console.log)

    /*this.devices_values = db.list('/busao/devices').valueChanges();*/

  }

  getCurrentDevice(device): void{
    console.log(device);
  }
}

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Позвонив по номеру subscribe(), вы потребляете данные в своем коде. Вместо этого вы захотите привязать поток valueChanges к компоненту, чтобы пользовательский интерфейс получал уведомления и мог отображать список: 

constructor(db: AngularFireDatabase) {
  this.devices = db.list('/busao/devices').valueChanges();

Если вы хотите связать список с пользовательским интерфейсом и показать свои данные в консоли, вы можете сделать: 

constructor(db: AngularFireDatabase) {
  let list = db.list('/busao/devices');
  this.devices = list.valueChanges()
  list.valueChanges().subscribe(console.log)
  // or: list.auditTrail().subscribe(console.log)

Также см. документацию AngularFire2 по извлечению данных в виде списков .

0 голосов
/ 13 февраля 2020

Используйте только это {{device.value}}. И если $ приходит от API, тогда используйте {{device ['$ value']}}

Посмотрите, что идет от API, попробуйте прочитать структуру API и не путайтесь между массивом и объектом.

Поскольку нет ключа со значением имени, вы можете отображать эти вещи только в соответствии с данными API,

{{device.payload}} или {{device.type}} или {{device.prevKey}} или {{device.key}}

Попробуйте 

{{device.payload.location.latitude}}
{{device.payload.location.longitude}}
{{device.payload.location.update}}
...