Nsryjdtyk

I'm using material to create a data table. The data come from a REST service and are fetched without any error. The browser also shows the data correctly in a data table. However, the property length of my data array can be undefined which results in the following error:

ERROR TypeError: Cannot read property 'length' of undefined
at TagListDataSource.push../src/app/tag/tag-list-datasource.ts.TagListDataSource.connect (tag-list-datasource.ts:39)

Here is the datasource.ts file:

import { DataSource } from '@angular/cdk/collections';

import { MatPaginator, MatSort } from '@angular/material';

import { map } from 'rxjs/operators';

import { Observable, of as observableOf, merge } from 'rxjs';

import {Tag} from './tag';

import {TagService} from './tag.service';



/**

 * Data source for the TagList view. This class should

 * encapsulate all logic for fetching and manipulating the displayed data

 * (including sorting, pagination, and filtering).

 */

export class TagListDataSource extends DataSource<Tag> {



  private tags: Tag;



  constructor(private paginator: MatPaginator, private sort: MatSort, private service: TagService) {

    super();

  }



  /**

   * Connect this data source to the table. The table will only update when

   * the returned stream emits new items.

   * @returns A stream of the items to be rendered.

   */

  connect(): Observable<Tag> {

    this.service.getTags().subscribe(data => this.tags = data);



    // Combine everything that affects the rendered data into one update

    // stream for the data-table to consume.

    const dataMutations = [

      observableOf(this.tags),

      this.paginator.page,

      this.sort.sortChange

    ];



    // Set the paginator's length

    this.paginator.length = this.tags.length;



    return merge(...dataMutations).pipe(map(() => {

      return this.getPagedData(this.getSortedData([...this.tags]));

    }));

  }



  /**

   *  Called when the table is being destroyed. Use this function, to clean up

   * any open connections or free any held resources that were set up during connect.

   */

  disconnect() {}



  /**

   * Paginate the data (client-side). If you're using server-side pagination,

   * this would be replaced by requesting the appropriate data from the server.

   */

  private getPagedData(data: Tag) {

    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;

    return data.splice(startIndex, this.paginator.pageSize);

  }



  /**

   * Sort the data (client-side). If you're using server-side sorting,

   * this would be replaced by requesting the appropriate data from the server.

   */

  private getSortedData(data: Tag) {

    if (!this.sort.active || this.sort.direction === '') {

      return data;

    }



    return data.sort((a, b) => {

      const isAsc = this.sort.direction === 'asc';

      switch (this.sort.active) {

        case 'name': return compare(a.name, b.name, isAsc);

        case 'id': return compare(+a.id, +b.id, isAsc);

        default: return 0;

      }

    });

  }

}



/** Simple sort comparator for example ID/Name columns (for client-side sorting). */

function compare(a, b, isAsc) {

  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);

}

Here is the component.ts file

import { Component, OnInit, ViewChild } from '@angular/core';

import { MatPaginator, MatSort } from '@angular/material';

import { TagListDataSource } from './tag-list-datasource';

import {TagService} from './tag.service';



@Component({

  selector: 'app-tag-list',

  templateUrl: './tag-list.component.html',

  styleUrls: ['./tag-list.component.css'],

})

export class TagListComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;

  @ViewChild(MatSort) sort: MatSort;

  dataSource: TagListDataSource;



  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */

  displayedColumns = ['id', 'name'];



  constructor(private service: TagService) { }



  ngOnInit() {

    this.dataSource = new TagListDataSource(this.paginator, this.sort, this.service);

  }

}

And here is the component.html file:

<div class="mat-elevation-z8">

  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">

    <!-- Id Column -->

    <ng-container matColumnDef="id">

      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>

      <td mat-cell *matCellDef="let row">{{row.id}}</td>

    </ng-container>



    <!-- Name Column -->

    <ng-container matColumnDef="name">

      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>

      <td mat-cell *matCellDef="let row">{{row.name}}</td>

    </ng-container>



    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>



  <mat-paginator #paginator

      [length]="dataSource.tags?.length"

      [pageIndex]="0"

      [pageSize]="50"

      [pageSizeOptions]="[25, 50, 100, 250]">

  </mat-paginator>

</div>

Array tags is not initialized so that line 39 (this.paginator.length = this.tags.length;) can produce this error. I thus tried to initialized tags by private tags: Tag = Array(); which results in an empty data table (because tags is initialized as an empty array). How can I initialize the array tags to avoid the abovementioned error and then fill the array with data from my REST service?

Thanks,
Michael

The error occurs because you read tag's length:

this.paginator.length = this.tags.length;

before tagService returns the response. In order to fix it you need to do above assignment inside this.service.getTags().subscribe(<put assignment here>) method.

As I also wrote in comment, I recommend you to use of build-in MatTableDataSource class.