Data does not display in table but is it actually exist

Question

I've been trying to display a list of data from the server. The problem is that it shows 'No data to display' but somehow the data is available. I've checked there is no error in the console.

I'm using Angular version 7 and bootstrap 4. Please help me with this.

Below is my code, thanks.

HTML:

<ngx-datatable class="bootstrap datatable-flush" *ngIf="(fromEdmPaging$ | async).length > 0"
                        [rows]="(fromEdmPaging$| async)?.excelTemplateM1Dto"
                        [columnMode]="'force'"
                        [loadingIndicator]="tableLoading$ | async"
                        [headerHeight]="50"
                        [footerHeight]="50"
                        [rowHeight]="'auto'"
                        [selected]="selectedReports"
                        [selectionType]="'checkbox'"
                        (select)="onSelect($event)"
                        [sorts]="[
                        { prop: 'wellName', dir: 'asc' }
                        ]"
                        [externalPaging]="true"
                        [count]="(fromEdmPaging$ | async)?.paging?.totalItems"
                        [offset]="(fromEdmPaging$ | async)?.paging?.pageNumber - 1"
                        [limit]="(fromEdmPaging$ | async)?.paging?.pageSize"
                        (page)="onPageChange($event)"
                        >

TS:

   public fromEdmPaging$ = this.fromEdmService.fromEdmPaging$;


public postEdmPaging() {
    this.tableLoading$.next(true);

    this.formFilter.valueChanges
      .pipe(
        startWith(this.formFilter.value),
        debounceTime(600),
        distinctUntilChanged(),
        takeUntil(this.destroy$),
        switchMap((formValue) => {
          this.pagingOption.PageNumber = 1;
          this.pagingOption.PageSize = formValue.limit;

          this.filterOption.wellName = formValue.wellName;

          return this.fromEdmService.postEdmPaging(this.pagingOption, this.filterOption).pipe(
            takeUntil(this.destroy$),
            tap(() => this.tableLoading$.next(false))
          );
        })
      )
      .subscribe();
  }

SERVICE

public fromEdmPaging$: Observable<any>;
private _fromEdmPaging: BehaviorSubject<any>;

constructor(private apiService: ApiService, private http: HttpClient) {
this._fromEdmPaging = <BehaviorSubject<any>>new BehaviorSubject({});
 this.fromEdmPaging$ = this._fromEdmPaging.asObservable();
}

public postEdmPaging(queryString, params){

        return this.apiService
          .postWithParams(`FromEdm/fromEdmPaging`, queryString, params)
          .pipe(
            map((result) => {

            this._fromEdmPaging.next(Object.assign([], result.body.excelTemplateM1Dto));

            return result;
            })
          );
      }

@Sela sorry but ive tried using stackblitz but there were too many errors because i received it from backend and server — gosling3, Dec 10 '19 at 08:43
Check the stackblitz sample i provided. it worked for me. change it according to your requirement — Selaka Nanayakkara, Dec 10 '19 at 08:46

score 0 · Answer 1 · answered Dec 10 '19 at 08:45

Please find the below snippet. This worked for me.

HTML:

<ngx-datatable #mydatatable class="bootstrap"  [sortType]="'multi'"  [headerHeight]="50" [footerHeight]="40" [rowHeight]="'auto'" [rows]="rows" [columnMode]="'force'" [limit]="5" [loadingIndicator]="loadingIndicator">
    <ngx-datatable-column name="Up">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">
            <button (click)="move('up', row.name)">Up</button>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Name">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
          {{value}}
        </span>
            <input autofocus (blur)="this.updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']" type="text" [value]="value"
            />
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Gender">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true" *ngIf="!editing[rowIndex + '-gender']">
          {{value}}
        </span>
            <select *ngIf="editing[rowIndex + '-gender']" (blur)="editing[rowIndex + '-gender'] = false" (change)="this.updateValue($event, 'gender', rowIndex)"
             [value]="value">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Company">
        <ng-template ngx-datatable-cell-template let-value="value">
            <child-component [inputVal]="value"></child-component>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Age">
        <ng-template ngx-datatable-cell-template let-value="value">
            {{value}}
        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

Typescript controller:

import { Component, OnInit } from '@angular/core';
import { SelectionType } from '@swimlane/ngx-datatable';
import * as _ from 'lodash';

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

  editing = {};
  rows = [];
  columns = [];

  loadingIndicator: boolean = true;
  reorderable: boolean = true;

  constructor() {
    setTimeout(() => { this.loadingIndicator = false; }, 5000);
    this.fetch((data) => {
      this.rows = data;
    });
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', 'https://unpkg.com/@swimlane/ngx-datatable@6.3.0/assets/data/company.json');
    req.onload = () => {
      cb(JSON.parse(req.response));
    };
    req.send();
  }

  ngOnInit() {
    this.columns = [
      { prop: 'name' },
      { name: 'Gender' },
      { name: 'Company' }
    ];
  }

  move(direction, reference): void {
    if (event.type === 'click') {
      this.rows = this.moveItemInArray(this.rows, reference, direction);
      this.rows = [...this.rows];
    }
  }

  moveItemInArray(items, reference, direction) {
    let returnVar = _.cloneDeep(items);
    let old_index = _.findIndex(items, function(item) {
      return item['name'] == reference;
    });
    let new_index = direction === 'up' ? old_index - 1 : old_index + 1;
    if (new_index >= returnVar.length) {
      let i = new_index - returnVar.length + 1;
      while (i--) {
        returnVar.push(undefined);
      }
    }
    returnVar.splice(new_index, 0, returnVar.splice(old_index, 1)[0]);
    return returnVar;
  }
}

Please find the Stackblitz link here.

Bilel-Zheni · Answer 2 · 2019-12-10T09:36:53.547

0

I think that you need to emit the whole body through your behavior subject not only table rows, so change this line :

this._fromEdmPaging.next(Object.assign([], result.body.excelTemplateM1Dto));

to :

this._fromEdmPaging.next(Object.assign({}, result.body));

edited Dec 10 '19 at 09:36

answered Dec 10 '19 at 09:21

Bilel-Zheni

1,202
1
6
10

Data does not display in table but is it actually exist

2 Answers2