Angular 6: No data to display

Question

I have a created a table using ngx-datable here is the link : https://swimlane.gitbook.io/ngx-datatable/getting-started here is what I have

Html :

<ngx-datatable
#table
class='material'
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[sortType]="'multi'"
[rowHeight]="'auto'"
[limit]="10"
[rows]='rows'>
<ngx-datatable-column name="poster_path">
  <ng-template ngx-datatable-cell-template let-value="value">
   {{value}}
  </ng-template>
</ngx-datatable-column>
  <ngx-datatable-column name="name">
    <ng-template ngx-datatable-cell-template let-value="value">
      {{value}}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="id">
    <ng-template ngx-datatable-cell-template let-value="value">
      {{value}}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="overview">
    <ng-template ngx-datatable-cell-template let-value="value">
      {{value}}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

Here is component.ts

import { Component, ViewChild } from '@angular/core';
import { MoviesService } from '../movies.service';

@Component({
  selector: 'app-tv-shows',
  templateUrl: './tv-shows.component.html',
  styleUrls: ['./tv-shows.component.scss']
})
export class TvShowsComponent {
  tvShowList: any;
  listFilter: '';
  rows = [];
  columns = [
    { prop: 'name' },
    { name: 'Id' },
    { name: 'Overview' }
  ];
  temp = [];
  constructor(private moviesService: MoviesService) {
    this.moviesService.getPopularTVShows().subscribe(res => {
      this.tvShowList = res.results;
      this.rows = res.results;
      console.log(this.rows);
    });
  }
  updateFilter(event) {
    const val = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
    // update the rows
    this.rows = temp;

  }

}

Here is the api data I am displaying in front page

   "results": [
        {
            "original_name": "The Big Bang Theory",
            "genre_ids": [
                35
            ],
            "name": "The Big Bang Theory",
            "popularity": 292.963,
            "origin_country": [
                "US"
            ],
            "vote_count": 3039,
            "first_air_date": "2007-09-24",
            "backdrop_path": "/nGsNruW3W27V6r4gkyc3iiEGsKR.jpg",
            "original_language": "en",
            "id": 1418,
            "vote_average": 6.8,
            "overview": "The Big Bang Theory is centered on five characters living in Pasadena, 
            "poster_path": "/ooBGRQBdbGzBxAVfExiO8r7kloA.jpg"
        },

Question

when I run my app and try to filter some data in a table(contains data) its says no data to display?

meaning my filter does not work at all.

at the same time data with underscore name are not returned eg

1. poster_path
2. vote_average

3. first_air_date etc

   • what is wrong with my codes???

Answer 1

Try adding columns attribute to your HTML, like this:

<ngx-datatable
   [columns] = "[
     { name: 'Id', prop: 'id' },
     { name: 'Overview', prop: 'overview' }
    ]">
</ngx-datatable>