Firebaselistobservable transforms into Object Array

Question

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

In 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 the Firebase to store the data and the FirebaseListObservable to get my information, but I’m not able to transform the FirebaseListObservable in a array, I tried to put the request variable inside the foreach, however, when I check it returns me undefined.

There’s some other way to feed mine smart-table with a FirebaseListObservable ?

Answer 1

I found the problem, the Ng2-Smart-Table module needs the Localdatasource class to power the table, when the data has external sources, such as Firebase, or some other service. Another problem is that my request variable was outside the scope and so returned 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,
    }
  };
}