title: Data does not display in table but is it actually exist
body: <p>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.</p>
  
  <p>I'm using Angular version 7 and bootstrap 4. Please help me with this.</p>
  
  <p>Below is my code, thanks.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ngx-datatable class="bootstrap datatable-flush" *ngIf="(fromEdmPaging$ | async).length &gt; 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)"
                          &gt;
  </code></pre>
  
  <p><strong>TS:</strong></p>
  
  <pre><code>   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) =&gt; {
            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(() =&gt; this.tableLoading$.next(false))
            );
          })
        )
        .subscribe();
    }
  </code></pre>
  
  <p><strong>SERVICE</strong></p>
  
  <pre><code>public fromEdmPaging$: Observable&lt;any&gt;;
  private _fromEdmPaging: BehaviorSubject&lt;any&gt;;
  
  constructor(private apiService: ApiService, private http: HttpClient) {
  this._fromEdmPaging = &lt;BehaviorSubject&lt;any&gt;&gt;new BehaviorSubject({});
   this.fromEdmPaging$ = this._fromEdmPaging.asObservable();
  }
  
  public postEdmPaging(queryString, params){
  
          return this.apiService
            .postWithParams(`FromEdm/fromEdmPaging`, queryString, params)
            .pipe(
              map((result) =&gt; {
  
              this._fromEdmPaging.next(Object.assign([], result.body.excelTemplateM1Dto));
  
              return result;
              })
            );
        }
  </code></pre>