title: MD-Table datasource data is empty array
body: <p>I am using angular material md-table to display data from service. My data source is subscribed to service to watch and get data for my datasource database. But this is not working as expected. My data source data is always empty array but my service is fetching data from API. Please look at my code and let me know why my datasource data is not detecting when service returns data. </p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { DataService } from '../core/services/data.service';
  import { SummaryService } from './summary.service';
  import { Summaries,SummaryDetails, SummaryDetailRequest, SummariessWithTotals } from "../models/datamodelsObj";
  import { DataSource } from '@angular/cdk';
  import { MdPaginator, DateAdapter, NativeDateAdapter } from '@angular/material';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-positionsummary',
    templateUrl: './position-summary.component.html',
    styleUrls: ['./position-summary.component.scss'],
    providers: []
  })
  export class PositionSummaryComponent implements OnInit {
  
    displayedColumns = ['SummaryName', 'ShortDesc', 'RegTime', 'ExpTime'];
    psDatabase = new SummaryDatabase(this.dataService, this.psService);
    dataSource: SummaryDataSource | any;@ViewChild(MdPaginator) paginator: MdPaginator;
  
    constructor(private dataService: DataService, private pagi: MdPaginator, private psService: SummaryService) {
  
    }
   ngOnInit() {
      this.psDatabase = new SummaryDatabase(this.dataService,this.psService);
      this.dataSource = new SummaryDataSource(this.psDatabase, this.paginator);
      console.log(this.dataSource);
    }
  }
  
  
  export class SummaryDatabase {
    summary: Summaries;
    summaryDetailRequestObj: SummaryDetailRequest;
    public dataChange: BehaviorSubject&lt;SummaryDetails[]&gt; = new BehaviorSubject&lt;SummaryDetails[]&gt;([]);
    get data(): SummaryDetails[] { return this.dataChange.value }
    constructor(private _dataService: DataService, private psService: SummaryService) {
      this.getAllSummaryDetails()
    }
  
    getAllSummaryDetails() {
      this.summaryDetailRequestObj.StartTime = "20170914";
      this.summaryDetailRequestObj.NodeID =this._dataService.selectedGlobalSummaryId;
      this.psService.getSummaryDetails(this.summaryDetailRequestObj).subscribe(data =&gt; this.dataChange.next(data));
    }
  }
  export class SummaryDataSource extends DataSource&lt;any&gt; {
  
    constructor(private _summaryDatabase: SummaryDatabase, private _paginator: MdPaginator) {
      super();
    }
    connect(): Observable&lt;SummaryDetails[]&gt; {
      const displayDataChanges = [
        this._summaryDatabase.dataChange,
        this._paginator.page
      ];
      return Observable.merge(...displayDataChanges).map(() =&gt; {
        const data = this._summaryDatabase.data.slice();
        console.log(data);
        const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
        return data.splice(startIndex, this._paginator.pageSize);
      })
    }
    disconnect() { }
  }
  </code></pre>
  
  <p>my service</p>
  
  <pre><code>export class SummaryService {
      public actionUrl: string;
      private headers: HttpHeaders;
  
      constructor(private http: HttpClient, private configuration: Configuration) {
          this.actionUrl = configuration.Server;
      }
  
      getSummaryDetails = (request: SummaryDetailRequest): Observable&lt;SummaryDetails[]&gt; =&gt; {
          return this.http.post(this.actionUrl + '/details', request,{ headers: this.headers })
              .map((data: SummariesWithTotals) =&gt; {
                  return data.Values;
              });
      }
  }
  </code></pre>
  
  <p>my view</p>
  
  <pre><code>&lt;md-table #table [dataSource]="dataSource"&gt;
  
        &lt;ng-container cdkColumnDef="SummaryName"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Summary Name&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.Sum_Name}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container cdkColumnDef="ShortDesc"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Short Description&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.ShortDesc}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container cdkColumnDef="RegTime"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Registered Time&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.RegTime}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container cdkColumnDef="ExpTime"&gt;
          &lt;md-header-cell *cdkCellDef&gt;Expiry Time&lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.ExpTime}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
  
        &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
        &lt;md-row *cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
  
      &lt;/md-table&gt;
  
      &lt;md-paginator #paginator
                    [length]="psDatabase.data.length"
                    [pageIndex]="0"
                    [pageSize]="10"
                    [pageSizeOptions]="[5, 10, 25, 100]"&gt;
      &lt;/md-paginator&gt;
  </code></pre>