Ngx-datatable: Use Async pipe like rxDemo example and show error: Cannot read property 'length' of null

Created on 6 Dec 2016 · 6Comments · Source: swimlane/ngx-datatable

use async pipe in the package version 2.1.3 show error my project.

[ ] bug report =>
code :

rows: Observable<ContactBook[]>;

  constructor(private cgService: ContactBookService) {
  }

  ngOnInit(): void {
    this.rows = this.cgService.getContactBooks();
  }

template :

<swui-datatable
          class="material"
          [rows]="rows | async"
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'"
          [limit]="10">
    <swui-datatable-column name="name">
      <template let-column="column" swui-datatable-header-template>
         {{column.name}}
      </template>
      <template let-value="value" swui-datatable-cell-template>
       <strong>{{value}}</strong>
      </template>
    </swui-datatable-column>
    <swui-datatable-column name="type">
      <template let-column="column" swui-datatable-header-template>
         {{column.name}}
      </template>
      <template let-value="value" swui-datatable-cell-template>
        <strong>{{'CONTACT_GROUP.'+value | translate}}</strong>
      </template>
    </swui-datatable-column>
  </swui-datatable>

error :

 core.umd.js:3004 EXCEPTION: Uncaught (in promise): Error: Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
    at DatatableComponent.get [as allRowsSelected] (http://localhost:3000/node_modules/angular2-data-table/release/index.js:2174:54)
    at _View_DatatableComponent1.detectChangesInternal (/Angular2DataTableModule/DatatableComponent/component.ngfactory.js:330:42)
    at _View_DatatableComponent1.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DatatableComponent1.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at _View_DatatableComponent0.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9323:23)
    at _View_DatatableComponent0.detectChangesInternal (/Angular2DataTableModule/DatatableComponent/component.ngfactory.js:192:8)
    at _View_DatatableComponent0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DatatableComponent0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at _View_ContactGroup0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23)
    at _View_ContactGroup0.detectChangesInternal (/PageModule/ContactGroup/component.ngfactory.js:203:8)ErrorHandler.handleError @ core.umd.js:3004next @ core.umd.js:6654schedulerFn @ core.umd.js:5952SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:5944NgZone.triggerError @ core.umd.js:6248onHandleError @ core.umd.js:6227ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
core.umd.js:3009 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3009next @ core.umd.js:6654schedulerFn @ core.umd.js:5952SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:5944NgZone.triggerError @ core.umd.js:6248onHandleError @ core.umd.js:6227ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
core.umd.js:3010 Error: Uncaught (in promise): Error: Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
    at DatatableComponent.get [as allRowsSelected] (datatable.component.ts:653)
    at _View_DatatableComponent1.detectChangesInternal (component.ngfactory.js:330)
    at _View_DatatableComponent1.AppView.detectChanges (core.umd.js:9305)
    at _View_DatatableComponent1.DebugAppView.detectChanges (core.umd.js:9410)
    at _View_DatatableComponent0.AppView.detectContentChildrenChanges (core.umd.js:9323)
    at _View_DatatableComponent0.detectChangesInternal (component.ngfactory.js:192)
    at _View_DatatableComponent0.AppView.detectChanges (core.umd.js:9305)
    at _View_DatatableComponent0.DebugAppView.detectChanges (core.umd.js:9410)
    at _View_ContactGroup0.AppView.detectViewChildrenChanges (core.umd.js:9331)
    at _View_ContactGroup0.detectChangesInternal (component.ngfactory.js:203)
    at resolvePromise (zone.js:468)
    at zone.js:445
    at ZoneDelegate.invoke (zone.js:232)
    at Object.onInvoke (core.umd.js:6206)
    at ZoneDelegate.invoke (zone.js:231)
    at Zone.run (zone.js:114)
    at zone.js:502
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (core.umd.js:6197)
    at ZoneDelegate.invokeTask (zone.js:264)ErrorHandler.handleError @ core.umd.js:3010next @ core.umd.js:6654schedulerFn @ core.umd.js:5952SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:5944NgZone.triggerError @ core.umd.js:6248onHandleError @ core.umd.js:6227ZoneDelegate.handleError @ zone.js:236Zone.runGuarded @ zone.js:131_loop_1 @ zone.js:412drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:388 Unhandled Promise rejection: Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cannot read property 'length' of null ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cann…, originalError: TypeError: Cannot read property 'length' of null
    at DatatableComponent.get [as allRowsSelected] …, context: DebugContext} TypeError: Cannot read property 'length' of null
    at DatatableComponent.get [as allRowsSelected] (http://localhost:3000/node_modules/angular2-data-table/release/index.js:2174:54)
    at _View_DatatableComponent1.detectChangesInternal (/Angular2DataTableModule/DatatableComponent/component.ngfactory.js:330:42)
    at _View_DatatableComponent1.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DatatableComponent1.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at _View_DatatableComponent0.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9323:23)
    at _View_DatatableComponent0.detectChangesInternal (/Angular2DataTableModule/DatatableComponent/component.ngfactory.js:192:8)
    at _View_DatatableComponent0.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9305:18)
    at _View_DatatableComponent0.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9410:48)
    at _View_ContactGroup0.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9331:23)
    at _View_ContactGroup0.detectChangesInternal (/PageModule/ContactGroup/component.ngfactory.js:203:8)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Error in ./DatatableComponent class DatatableComponent - inline template:15:8 caused by: Cannot read property 'length' of null(…)

```

Table version:2.1.3
Angular version: 2.2.1
Browser: [ Chrome XX | Firefox XX ]
Language: [TypeScript 2.0.10 ]

Bug Investigate Med

Source

h4mit

👍1

Most helpful comment

@h4mit you can use next workaround with startWith() :

rows: Observable<ContactBook[]>;

  constructor(private cgService: ContactBookService) {
  }

  ngOnInit(): void {
    this.rows = this.cgService.getContactBooks().startWith(new Array<ContactBook>());
  }

Alex-Tsyganok on 6 Dec 2016

❤1 👍1

All 6 comments

Interesting ... can u make a plunkr plz?

amcdnl on 6 Dec 2016

Got same error, can be reproduced on demo page http://swimlane.github.io/angular2-data-table/# in Basic RxJS example.
```polyfills.js:1100 TypeError: Cannot read property 'length' of null
at e.get [as allRowsSelected] (app.js:4)
at View_e1.detectChangesInternal (component.ngfactory.js:223)
at View_e1.e.detectChanges (polyfills.js:1226)
at e.detectChangesInNestedViews (polyfills.js:1233)
at proxyViewClass.View_e0.detectChangesInternal (component.ngfactory.js:121)
at proxyViewClass.e.detectChanges (polyfills.js:1226)
at proxyViewClass.View_e0.detectChangesInternal (component.ngfactory.js:75)
at proxyViewClass.e.detectChanges (polyfills.js:1226)
at View_e12.detectChangesInternal (component.ngfactory.js:1697)
at View_e12.e.detectChanges (polyfills.js:1226)


Looks like problem is here, because property **rows** treated as array, but is't Observable<any[]> 
```/**
         * Returns if all rows are selected.
         *
         * @readonly
         * @private
         * @type {boolean}
         * @memberOf DatatableComponent
         */
        get: function () {
            return this.selected.length === this.rows.length;
        }

Alex-Tsyganok on 6 Dec 2016

@h4mit you can use next workaround with startWith() :

rows: Observable<ContactBook[]>;

  constructor(private cgService: ContactBookService) {
  }

  ngOnInit(): void {
    this.rows = this.cgService.getContactBooks().startWith(new Array<ContactBook>());
  }

Alex-Tsyganok on 6 Dec 2016

❤1 👍1

thank u guys, solved problem with use startWith() 😊

h4mit on 7 Dec 2016

Can one of you guys make a PR to the docs to add this as a caveat plz?

amcdnl on 7 Dec 2016

Why is this issue closed? It's still an existing bug and it's really annoying. It's not good behaviour, I'm sure I'm not the only one to lose hours due to this silly bug and to find the only solution buried away in a github issue is a bit frustrating.