Display Data in Tabular form

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 :


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’;

 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 :

     Ionic Blank

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



kindly Requesting Help

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