TypeError: Cannot read property 'length' of undefined ( allRowsSelected )

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

since version 11.1.x I have the following error in console

DatatableComponent.html:5 ERROR TypeError: Cannot read property 'length' of undefined
    at DatatableComponent.get [as allRowsSelected] (index.js:4867)
    at Object.eval [as updateDirectives] (DatatableComponent.html:18)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
    at checkAndUpdateView (core.js:13508)
    at callViewAction (core.js:13858)
    at execEmbeddedViewsAction (core.js:13816)
    at checkAndUpdateView (core.js:13509)
    at callViewAction (core.js:13858)
    at execComponentViewsAction (core.js:13790)
    at checkAndUpdateView (core.js:13514)

It seems to be a new feature, so maybe some issues there ? I haven’t changed my code since 11.0.4 which is as follow :

<ngx-datatable
    class="material fullscreen"                        
    [columnMode]="'force'"
    [rowClass]="getRowClass"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [externalSorting]="true"
    [loadingIndicator]="loading"
    [limit]="pageSize"
    [offset]="pageOffset"
    [count]="totalCount"
    [rows]="items"
    [columns]="columns"

    [messages]="{emptyMessage: 'DataTable.EmptyMessage' | translate, totalMessage: 'DataTable.Total' | translate, selectedMessage: 'DataTable.SelectedMessage' | translate}"
    (page)="onPageChanged($event)"
    (sort)="onSortChanged($event)"
    (scroll)="onScroll($event.offsetY)"
    (reorder)="onColumnsReordered($event)">

    <!-- Header template -->
    <ng-template #headerTemplate let-column="column" let-sort="sortFn">
        <span class="datatable-header-cell-wrapper"><span class="datatable-header-cell-label draggable text-truncate" (click)="sort()">{{ column.name | translate }}</span></span>
    </ng-template>

    <!-- Cell template -->
    <ng-template #cellTemplate let-column="column" let-value="value">
        <div [innerHTML]="getCellHtml(value, column)"></div>
    </ng-template>

    <!-- Actions template -->
    <ng-template #actionTemplate let-row="row" let-value="value">
        <button mat-icon-button (click)="onDeleteClick(value)" [attr.disabled]="!canDelete" color="warn" matTooltip="{{'CRM.Delete' | translate}}" [matTooltipPosition]="'below'">
            <i class="material-icons">delete</i>
        </button>
        <button mat-icon-button (click)="onEditClick(value)" [attr.disabled]="!canEdit" matTooltip="{{'CRM.Edit' | translate}}" [matTooltipPosition]="'below'">
            <i class="material-icons">create</i>
        </button>
    </ng-template>
    
</ngx-datatable>

Please tell us about your environment:

win10 pro, vscode, npm, node

• Table version: 0.8.x

11.1.2

• Angular version: 2.0.x

5.0.2

• Browser:

chrome 62.0.3202.94

• Language: [all | TypeScript X.X | ES6/7 | ES5] typescript 2.6.1

[aog1971]

Me too - Version 11.1.4 receiving the same error. The problem in my case is because an uninitialized object is assigned to the [row] property or it is not an array type.

In my html: <ngx-datatable class = “material”     [rows] = “customers”     [loadingIndicator] = “loadingIndicator”> …

In my component.ts:

public customers: any; // <- here’s the problem …

The solution, assign an object of type initialized array:

In my component.ts:

public customers: Array <any> = new Array <any> (); // <- solution …

The best solution is to initialize the array of the customer type in my case public customers: Array <customer> = new Array <customer> (); // <- best solution

I hope you seriva for help, I have solved the problem.

[amcdnl]

Try 11.1.7 plz