Error when using MdbTableEditorDirective Filter

What do you mean you can't reproduce the problem? Just assign an array of objects that has at least one null property to the directives dataArray.

It breaks on:

filterIterableArray(searchKey) { if (this.dataArray) { /** @type {?} / const filter = this.dataArray.filter((/* * @param {?} obj * @return {?} / (obj) => { return Object.keys(obj).some((/* * @param {?} key * @return {?} / (key) => { return obj[key] .toString()* .toLowerCase() .includes(searchKey); })); })); this.iterableDataArray = filter.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this.nextShouldBeDisabled = this.iterableDataArray.length < this.itemsPerPage; this.updatePaginationInfo(); return this.iterableDataArray; } } /** * @param {?} searchKey * @return {?} */ performSearch(searchKey) { this._searchKey = searchKey; if (!searchKey && this.dataArray) { this.nextShouldBeDisabled = false; this.data = this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); this._iterableDataArray$.next(this.data); return this.dataArray.slice(this.itemsPerPage * (this.currentPage - 1), this.itemsPerPage * (this.currentPage - 1) + this.itemsPerPage); } else { this.data = this.filterIterableArray(searchKey.toLowerCase()); return this.filterIterableArray(searchKey.toLowerCase()); } }

import { Component, ViewChild, OnInit, } from '@angular/core';
import { MdbTableEditorDirective } from 'mdb-table-editor';

@Component
(
  {
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
export class AppComponent implements OnInit {
  public title = 'ng-uikit-pro-standard';

  @ViewChild('table', { static: true })
  public mdbTableEditor: MdbTableEditorDirective;
  public headElements = ['Id', 'Data Source Name', 'Description'];
  public searchText: string = '';
  public highlightedRow: DataSource = null;
  public sources = new Array<DataSource>();
  public source = new DataSource();
  public visibleItems: number = 10;
  public visibleItemsSelect = [
    { value: '10', label: '10', selected: true },
    { value: '25', label: '25' },
    { value: '50', label: '50' },
    { value: '100', label: '100' }
  ];

  public ngOnInit(): void {
    this.source.id = 1;
    this.source.dataGroupId = 1;
    this.source.dataSourceName = 'Data Source One';
    this.source.dataSourceDescription = 'Data Source One Description';
    this.source.dataGroup = null;

    this.sources.push(this.source);

    this.mdbTableEditor.dataArray = this.sources;
  }
}

class DataSource {
  public id!: number;
  public dataGroupId!: number;
  public dataSourceName!: string;
  public dataSourceDescription!: string;
  public dataGroup?: DataGroup | undefined;
}

class DataGroup {
  public id!: number;
  public dataGroupName!: string;
  public dataGroupDescription!: string;
}


 <div class="container-fluid">

   <div class="row mb-5">
     <div class="col-xl-12 mx-auto">

       <div class="row w-100 d-flex mb-3 ml-0">

         <form class="form-inline md-form md-bg form-sm active-searchBar-2 ml-auto p-2"
               style="margin-bottom: auto; margin-top: auto;">
           <input [(ngModel)]="searchText"
                  [ngModelOptions]="{standalone: true}"
                  aria-label="Search"
                  class="form-control form-control-sm mr-1"
                  mdbInput
                  placeholder="Search on any column..."
                  style="min-width: 300px"
                  type="text">
           <i aria-hidden="true"
              class="fas fa-search float-md-left">
           </i>
         </form>

       </div>
       <div class="z-depth-1">
         <div class="table-responsive">
           <table #table="mdbEditor"
                  (rowHighlight)="highlightedRow = $event"
                  [itemsPerPage]="visibleItems"
                  class="table table-hover table-hr-data-row"
                  mdbTableEditor>
             <thead>
               <tr>
                 <th *ngFor="let head of headElements; let i = index"
                     scope="col"> 
                   {{head}}
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let item of table.performSearch(this.searchText); let i = index">
                 <td>{{item.id}}</td>
                <td>{{item.dataSourceName}}</td>
                 <td>{{item.dataSourceDescription}}</td>
  </tr>
             </tbody>
             <tfoot>
               <tr>
                 <td class="align-middle"
                     colspan="7">
                   <div class="d-flex mb-3">

                     <mdb-select (ngModelChange)="visibleItems = +$event"
                                 [(ngModel)]="visibleItems"
                                 [options]="visibleItemsSelect"
                                 [outline]="true"
                                 [appendToBody]="true"
                                 class="mr-auto p-2 align-middle"
                                 placeholder="# to Display"
                                 style="max-width: 130px">
                     </mdb-select>

                     <span class="p-2 align-middle m-2"
                           style="margin-bottom: 0px">
                       Showing {{table.paginationInfo.firstItem}} to {{table.paginationInfo.lastItem}} of {{table.paginationInfo.allItems}} Data Sources
                     </span>


                     <mdb-icon (click)="table.prevPage()"
                               [ngClass]="{'disabled text-muted': table.disablePrevious()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-left"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                     <mdb-icon (click)="table.nextPage()"
                               [ngClass]="{'disabled text-muted': table.disableNext()}"
                               class="p-2 align-middle"
                               fas
                               icon="angle-right"
                               mdbWavesEffect
                               size="lg">
                     </mdb-icon>
                   </div>
                 </td>
               </tr>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

  </div>