Display Data in Tabular form

Ionic Framework ionic-v3
1

I have a project to display some data which comes from google cloud firestore. the incoming data stored in an observable.To display data in a tabular form I am using ngx-datatable.

when I try to access data using ng form it shows some error.

ng:///AppModule/HomePage.ngfactory.js:8 ERROR Error: Error trying to diff ‘Song’. Only maps and objects are allowed
at DefaultKeyValueDiffer.diff (vendor.js:8963)
at DatatableComponent…/src/components/datatable.component.ts.DatatableComponent.ngDoCheck (vendor.js:152111)
at checkAndUpdateDirectiveInline (vendor.js:12789)
at checkAndUpdateNodeInline (vendor.js:14310)
at checkAndUpdateNode (vendor.js:14253)
at debugCheckAndUpdateNode (vendor.js:15146)
at debugCheckDirectivesFn (vendor.js:15087)
at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:39)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:15072)
at checkAndUpdateView (vendor.js:14219)

Here is My code :

home.ts:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { FirestoreProvider } from ‘…/…/providers/firestore/firestore’;
import { Observable } from ‘rxjs/Observable’;
import { Currency } from ‘…/…/models/song.interface’;

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
  })
   export class HomePage {

 //public rows: any[] ;
 public columns : any;

 public currencyList: Observable<Currency[]>;

  constructor(public navCtrl: NavController,
   public firestoreProvider: FirestoreProvider) {

    this.columns = [
    { Name: '' },
    { Singer: '' },
    { Album : '' }
  ];

 }
 ionViewDidLoad() {

    this.currencyList = this.firestoreProvider.getSongList().valueChanges();


  }



  }

home.html :

 <ion-header>
  <ion-navbar>
   <ion-title>
     Ionic Blank
     </ion-title>
  </ion-navbar>
   </ion-header>

    <ion-content padding > 
       <div *ngFor="let song of songList | async">

 


      <ngx-datatable
        [sortType]="'multi'"
       [headerHeight]="50"
       [footerHeight]="50"
        [rowHeight]="50"
         [rows]="song.name"
         [columns]="columns"
          [columnMode]="'force'"
         [limit]="10"></ngx-datatable>
        </div>
         </ion-content>

kindly Requesting Help

2

If song.name is not a list, but songList is, then you should use [rows]=“songList” and leave “<div *ngFor…” away