We help IT Professionals succeed at work.
Get Started

Error in Angular 2 when showing in grid

zolf
zolf asked
on
354 Views
Last Modified: 2018-03-21
Hello there,

I am trying to retrive data from the server by calling a Servicec and displaying in the Gird. But for some reason i get error.Below I have pasted the code and the error

<div class="row">
  <div class="col-xs-12">
    <section class="widget">
      <header>
        <h3>Shelf Life List</h3>
        <div class="actions">
          <button class="btn btn-info " [routerLink]="['/app/master/shelflife', '0']"><i class="fa fa-plus-square-o"></i> Add New Shelf Life</button>
        </div>
      </header>

      <shelflife-grid [shelf_lifes] ="filteredShelfLife"></shelflife-grid>

    </section>
  </div>

</div>

Open in new window


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

import { IShelfLife } from '../../shared/interfaces';
import { TrackByService } from '../../core/services/trackby.service';

@Component({ 
  selector: 'shelflife-grid', 
  templateUrl: 'shelflife-grid.component.html',
  //When using OnPush detectors, then the framework will check an OnPush 
  //component when any of its input properties changes, when it fires 
  //an event, or when an observable fires an event ~ Victor Savkin (Angular Team)
  changeDetection: ChangeDetectionStrategy.OnPush 
})
export class ShelfLifeGridComponent implements OnInit {

   @Input() shelf_lifes: IShelfLife[] = [];

  constructor() 
  { 

  }
   
  ngOnInit() {

  }
}

Open in new window


<div class="body">
    <table #tb1 class="table table-striped">
        <thead>
            <tr>
                <th>Name Eng</th>
                <th>Name Per</th>
                <th>Month</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let shelflife of shelf_lifes">
                <td>{{shelflife.months}}</td>
                <td>{{shelflife.name_en}}</td>
                <td>{{shelflife.name_fa}}</td>
            </tr>
            <tr *ngIf="!shelf_lifes.length">
                <td>&nbsp;</td>
                <td colspan="6">No Records Found</td>
            </tr>
        </tbody>
    </table>
</div>

Open in new window




EXCEPTION: Cannot read property 'length' of undefined
ErrorHandler.handleError @ error_handler.js:51
next @ application_ref.js:373
schedulerFn @ async.js:98
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:84
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:418
error_handler.js:56 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:56
next @ application_ref.js:373
schedulerFn @ async.js:98
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:84
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:418
error_handler.js:57 TypeError: Cannot read property 'length' of undefined
    at CompiledTemplate.proxyViewClass.View_ShelfLifeGridComponent0.detectChangesInternal (/MasterModule/ShelfLifeGridComponent/component.ngfactory.js:93:49)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/vendor.bundle.js:49983:18)
    at CompiledTemplate.proxyViewClass.View_ShelfLifeComponent0.detectChangesInternal (/MasterModule/ShelfLifeComponent/component.ngfactory.js:90:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/vendor.bundle.js:49983:18)
    at CompiledTemplate.proxyViewClass.View_ShelfLifeComponent_Host0.detectChangesInternal (/MasterModule/ShelfLifeComponent/host.ngfactory.js:27:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at ViewContainer.detectChangesInNestedViews (http://localhost:3000/vendor.bundle.js:50331:37)
    at CompiledTemplate.proxyViewClass.View_Layout0.detectChangesInternal (/LayoutModule/Layout/component.ngfactory.js:84:15)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/vendor.bundle.js:49983:18)
    at CompiledTemplate.proxyViewClass.View_Layout_Host0.detectChangesInternal (/LayoutModule/Layout/host.ngfactory.js:27:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at ViewContainer.detectChangesInNestedViews (http://localhost:3000/vendor.bundle.js:50331:37)
    at CompiledTemplate.proxyViewClass.View_App0.detectChangesInternal (/AppModule/App/component.ngfactory.js:27:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/vendor.bundle.js:49983:18)
    at CompiledTemplate.proxyViewClass.View_App_Host0.detectChangesInternal (/AppModule/App/host.ngfactory.js:27:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:49998:14)
    at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:50997:20)
    at http://localhost:3000/vendor.bundle.js:41502:67
    at Array.forEach (native)
    at ApplicationRef_.tick (http://localhost:3000/vendor.bundle.js:41502:25)
    at http://localhost:3000/vendor.bundle.js:41421:105
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15263:26)
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:54901:37)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15262:32)
    at Zone.run (http://localhost:3000/polyfills.bundle.js:15134:43)
    at NgZone.run (http://localhost:3000/vendor.bundle.js:54770:62)
    at Object.next (http://localhost:3000/vendor.bundle.js:41421:81)
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:3000/vendor.bundle.js:47164:52)
    at SafeSubscriber.__tryOrUnsub (http://localhost:3000/vendor.bundle.js:96448:16)
    at SafeSubscriber.next (http://localhost:3000/vendor.bundle.js:96397:22)
    at Subscriber._next (http://localhost:3000/vendor.bundle.js:96350:26)
    at Subscriber.next (http://localhost:3000/vendor.bundle.js:96314:18)
    at EventEmitter.Subject.next (http://localhost:3000/vendor.bundle.js:96066:25)
    at EventEmitter.emit (http://localhost:3000/vendor.bundle.js:47150:76)
    at NgZone.checkStable (http://localhost:3000/vendor.bundle.js:54866:40)
    at NgZone.setHasMicrotask (http://localhost:3000/vendor.bundle.js:54950:14)
    at Object.onHasTask (http://localhost:3000/vendor.bundle.js:54913:31)
    at ZoneDelegate.hasTask (http://localhost:3000/polyfills.bundle.js:15324:33)
    at ZoneDelegate._updateTaskCount (http://localhost:3000/polyfills.bundle.js:15341:26)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15301:26)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:15172:47)
    at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:15439:35)

Open in new window

Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 1 Answer and 4 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE