title: MD Paginator error: data.slice is not a function at MapSubscriber
body: <p>Nothing on the Web about this error :-(</p>
  
  <p>It occurs with two actions in my MD Paginator in the MD Data Table.</p>
  
  <p>1) When I click on the arrow for nextPage,</p>
  
  <p>2) When I try to change the page size, say from 5 rows to 10.</p>
  
  <p>The app crashes with this error.  Other than that, all is good with the Data Table display. It displays the 5 first items in the db and the item count at the bottom, in the pagination section, is 8, the total in the db.</p>
  
  <p>Any idea what is happening and a fix?  I'm trying to put as much code as possible in the service because other components will use it.</p>
  
  <p>First the html.  Notice that I add buttons in the rows of the last two columns and hide the contents of the row in the last column.  The buttons, and that hidden row, work fine.  I'm hoping they aren't the problem because I need them.  I commented them out in the html and the related displayedColumns in the component.ts and no help.</p>
  
  <pre><code>&lt;md-table #table [dataSource]="dataSource"&gt;
  
        &lt;!-- First Name Column --&gt;
        &lt;ng-container cdkColumnDef="firstName"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Name &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.firstName}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Las Name Column --&gt;
        &lt;ng-container cdkColumnDef="lastName"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Last Name &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt;  {{row.lastName}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Title Column --&gt;
        &lt;ng-container cdkColumnDef="mainSkillTitle"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Title &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.mainSkillTitle}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Main Skills Column --&gt;
        &lt;ng-container cdkColumnDef="mainSkills"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Main Skills &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt; {{row.mainSkills}} &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Delete Buttons Column --&gt;
        &lt;ng-container cdkColumnDef="delete"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Delete &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt;
            &lt;button (click)="deleteMember(row.$key)"&gt;Delete&lt;/button&gt; &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Edit button Column --&gt;
        &lt;ng-container cdkColumnDef="edit"&gt;
          &lt;md-header-cell *cdkHeaderCellDef&gt; Edit &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row"&gt;
            &lt;button (click)="goToDetailPage(row.$key)"&gt;Edit&lt;/button&gt; &lt;/md-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Database key Column --&gt;
  
        &lt;ng-container cdkColumnDef="key"&gt;
          &lt;md-header-cell *cdkHeaderCellDef class="hiddenField"&gt; Key &lt;/md-header-cell&gt;
          &lt;md-cell *cdkCellDef="let row" class="hiddenField"&gt; {{row.$key}} &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]="dataLength?.length"
                    [pageIndex]="0"
                    [pageSize]="5"
                    [pageSizeOptions]="[5, 10, 25, 100]"&gt;
      &lt;/md-paginator&gt;
  </code></pre>
  
  <p>The code in the service.ts with a console.log analysis.</p>
  
  <pre><code>// Data Table imports.
  import { MdPaginator } from '@angular/material';
  import { DataSource } from '@angular/cdk';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/observable/merge';
  import 'rxjs/add/operator/map';
  
  
  @Injectable()
  export class MembersAdminService {
  
    private membersData$: FirebaseListObservable&lt;MemberModel[]&gt;;
  
  
    constructor(
      private af: AngularFireDatabase,
      private successService: SuccessService,
  
      @Inject(FirebaseApp) fb) {
        this.membersData$ = af.list('Members');
    }
  
  
    public getMembers(): FirebaseListObservable&lt;any&gt; {
      return this.af.list('Members', {
        query: {
          orderByChild: 'lastName'
        }
      });
    }
  
  ... CRUD functions
  }  
  
  export class MembersAdminSource extends DataSource&lt;MemberModel&gt; {
  
      constructor(
          private memberDatabase: MembersAdminService,
          private paginator: MdPaginator) {
          super();
      }
  
  connect(): Observable&lt;MemberModel[]&gt; {
        const displayDataChanges = [
            this.memberDatabase.getMembers(),
            this.paginator.page
        ];
          // return Observable.of(this.memberDatabase); Old code that worked.
  
        return Observable.merge(...displayDataChanges).map((data, page) =&gt; {
            const dataSlice = data.slice();
            console.log('dataSlice', dataSlice); // console.log =&gt; Array of 3 objects, 8 total in db.
  
            // Get the page's slice per pageSize setting.
            const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
            const dataLength = this.paginator.length;
            console.log('dataLength', this.paginator.length); // console.log =&gt; 8 = correct.
            console.log('pageIndex', this.paginator.pageIndex); // console.log =&gt; 0 = correct.
            console.log('pageSize', this.paginator.pageSize); // console.log =&gt; 5 = correct.
            console.log('startIndex', startIndex);  // 0 = correct.
            return dataSlice.splice(startIndex, this.paginator.pageSize);
              // console.log =&gt; an array of 5 objects.  Seems to be correct. 3 more in db.
        });
  
      }
  
      disconnect() {}
  }
  </code></pre>
  
  <p>The relevant code in the component.ts</p>
  
  <pre><code>export class AllMembersComponent implements OnInit {
  
    membersData: MemberModel[];
    private result: boolean;
    allMembers: MemberModel[];
  
    // For search
    startAt = new Subject();
    endAt = new Subject();
    lastKeypress: 0;
  
    // For MD data table.
    private dataSource: MembersAdminSource | null;
    private displayedColumns = [
        'firstName',
        'lastName',
        'mainSkillTitle',
        'mainSkills',
        'delete',
        'edit',
        'key'
    ];
  
    @ViewChild(MdPaginator)
    paginator: MdPaginator;
  
    public dataLength: any;
    private dataArray: any;
  
    constructor(
        private membersAdminService: MembersAdminService,
        private router: Router,
        private confirmService: ConfirmService,
        private memberDatabase: MembersAdminService
    ) {}
  
    ngOnInit() {
  
      this.membersAdminService.getMembers()
          .subscribe(members =&gt; {
              this.dataSource = new MembersAdminSource(this.memberDatabase, this.paginator);
              this.dataLength = members;
          });
  }
  ... More stuff
  </code></pre>