Error in Angular 2 when showing in grid

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>

Select all 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() {

  }
}

Select all 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>

Select all 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)

Select all Open in new window