FirebaseListObservable transforms into Object Array

Question

FirebaseListObservable transforms into Object Array

Navigation

#1 by (1 votes)

2

I'm using Ng2-Smart-Table, according to the documentation it accepts an array of objects to mount the table:

No HTML:

 <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>

In Javascript

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { LocalDataSource } from 'ng2-smart-table';
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from       'angularfire2/database';
import {forEach} from "@angular/router/src/utils/collection";

@Component({
   selector: 'app-tabela',
   templateUrl: './tabela.component.html',
   styleUrls: ['./tabela.component.scss']
)
export class TabelaComponent implements OnInit {

    filTipo: string = 'todos';
    dados: FirebaseListObservable<any>;
    public solicitacoes: Array<Object>;

    constructor(private db: AngularFireDatabase) {
        this.dados = this.db.list('/solicitacoes');
        this.dados.forEach(element => {
            this.solicitacoes = element;
        });
        console.log(this.solicitacoes)
      }

      ngOnInit() {
          localStorage.getItem('filTipo');
      }


  }

    // Ng2SmartTable começa aqui



  settings = {
        selectMode: 'multi',
        columns: {
            tipo: {
            title: 'Tipo',
        },
        localizacao: {
            title: 'Localização',
        },
       descricao: {
            title: 'Descrição',
       },
       data: {
            title: 'Data',
      },
   },
   actions: {
     add: false,
     edit: false,
     delete: false,
     open: true,
   }
};

data = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: '[email protected]',
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: '[email protected]',
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: '[email protected]',
  },
  {
    id: 4,
   name: 'Patricia Lebsack',
    username: 'Karianne',
    email: '[email protected]',
  },
  {
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: '[email protected]',
  }
];

// Ng2SmartTable termina aqui

}

I'm using Firebase to store the data and FirebaseListObservable to fetch my information, but I'm not able to transform FirebaseListObservable to array , tried to put variable requests within foreach but when I check it it returns me undefined .

Is there any other way to feed my smart-table to FirebaseListObservable ?

javascript array firebase typescript angular

asked by anonymous 31.05.2017 / 14:04

1 answer

Placing components inside a JFrame How to block directory files recursively?

score 1 · Accepted Answer

I found the problem, the Ng2-Smart-Table module requires the LocalDataSource class to feed the table, when the data has external sources, such as Firebase, or some other service. Another problem is that my variable request was out of scope and so I would return undefined. Below the Updated Code:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { LocalDataSource } from 'ng2-smart-table';
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { forEach } from "@angular/router/src/utils/collection";

@Component({
  selector: 'app-tabela',
  templateUrl: './tabela.component.html',
  styleUrls: ['./tabela.component.scss']
})
export class TabelaComponent implements OnInit {

  source: LocalDataSource;

  filTipo: string = 'todos';
  dados: FirebaseListObservable;
  public solicitacoes: any;

  constructor(private db: AngularFireDatabase) {
    this.dados = this.db.list('/solicitacoes');
    this.source = new LocalDataSource();
    let _self = this;
    this.dados.forEach(element => {
      _self.source.load(element);
    });
  }
  ngOnInit() {

  }


  settings = {
    selectMode: 'multi',
    columns: {
      tipo: {
        title: 'Tipo',
      },
      endereco: {
        title: 'Localização',
      },
      descSolicitacao: {
        title: 'Descrição',
      },
      data: {
        title: 'Data',
      },
      status: {
        title: 'Status',
      },
    },
    actions: {
      add: false,
      edit: false,
      delete: false,
      open: true,
    }
  };
}