Nativescript-angular: TypeError: Cannot read property 'push' of undefined

[francisrod01]

I need more information about where is the error.

Scenario

I click on button and pass ID data from a component to AppComponent using MyService..subscribe().

In app.component.html has a two verification using [ngIf] about this ID like below:

<StackLayout>

  <ng-template [ngIf]="!myID">
    <grid-list></grid-list>
  </ng-template>

  <ng-template [ngIf]="!!myID">
    <add-product></add-product>
  </ng-template>

</StackLayout>

The add-product has a <products> directive as below:

The products.component.html:

<StackLayout>

  <ListView
    [items]="products"
    (loaded)="onLoaded(event)"
    (itemLoading)="onItemLoading(event)"
    (itemTap)="onItemTap(event)"
    class="list-group">

      <ng-template let-item="item" let-odd="odd" let-even="even">

        <StackLayout orientation="horizontal">

            <Label [text]="item.title" class="list-group-item"></Label>

            <Label [text]="item.price" class="list-group-item"></Label>

        </StackLayout>

      </ng-template>

  </ListView>

</StackLayout>

The products.component.ts:

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


@Component({
  selector: 'products',
  moduleId: module.id,
  templateUrl: './products.component.html'
})

export class ProductsComponent implements OnInit {
  public products: Array<any>;

  ngOnInit() {
    this.products = [];
  }

  onLoaded(e) {
    const products = [
      { title: 'Product 01', price: 888.88 },
      { title: 'Product 02', price: 888.88 },
      { title: 'Product 03', price: 888.88 }
    ];

    products.map(item => this.products.push(item));
  }

  public onItemLoading(e) {
    console.log('=== onItemLoading(e) called: ', e);
  }

  public onItemTap(e) {
    console.log('=== onItemTap(e) called: ', e);
  }
}

Output when I click the button and pass myID:

JS: ERROR TypeError: Cannot read property 'push' of undefined
JS: ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 370589699,
JS:       "rootNodeFlags": 1,
JS:       "nodeMatchedQueries": 2,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": 0,
JS:           "flags": 1,
JS:           "childFlags": 370589699,
JS:           "directChildFlags": 33554435,
JS:           "childMatchedQueries": 2,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "ngContentIndex": null,
JS:           "childCount": 10,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": {
JS:             "ns": "",
JS:             "name": "StackLayout",
JS:             "attrs": [],
JS:             "template": null,
JS:             "componentProvider": null,
JS:             "componentView": null,
JS:             "componentRendererType": null,
JS:             "publicProviders": {},
JS:             "allProviders": "...

Environments

{
  "nativescript": {
    "id": "org.nativescript.myProject",
    "tns-android": {
      "version": "4.1.2"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-drop-down": "^4.0.0",
    "nativescript-floatingactionbutton": "^4.1.3",
    "nativescript-localize": "^3.0.3",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "tns-core-modules": "^4.1.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "gts": "^0.5.4",
    "lazy": "1.0.11",
    "nativescript": "^4.1.0",
    "nativescript-dev-typescript": "~0.6.0",
    "tslint": "^5.9.1",
    "typescript": "~2.6.2"
  }
}

[francisrod01]

[Solved]: Declare the array and initialize it let reservationArr : Array<object> = [];

More details: https://stackoverflow.com/a/46621301/3332734