Array of Objects Angular 2

Question

I can't find the solution to my problem. I have class Device then I have DeviceService for communication. Finally, on page Scenes I need to create an array of Device but ends with errors. I have tried nearly everything.

Errors like: Cannot read property 'undefined' of undefined; Cannot read property 'id' of undefined Thank you for help :-)

Device.ts

export class Device {
  id: number;
  name: string;
  number: string;
  constructor() { }
  get deviceId(): number {return this.id; }
  get deviceNumber(): string {return this.number; }
  get deviceName(): string {return this.name; }
  set deviceNumber(number: string) {this.number = number; }
  set deviceName(name: string) {this.name = name;}
}

Then I made DeviceService which I've added to providers DeviceService.ts

import {Injectable} from '@angular/core';
import {Device} from '../providers/device';
@Injectable()
export class DeviceService {
  deviceCount: number;
  devices: Array<Device>;
  constructor(){}
  getDevices(): Array<Device> {
    return this.devices;
  }
  pushDevice(name, number) {
    number.toString();
    this.devices[this.deviceCount].id++;
    this.devices[this.deviceCount].deviceName = name;
    this.devices[this.deviceCount].deviceNumber = number;
    this.deviceCount++;
  }
}

Scene.ts : Where I need to create array of Device

import {Component} from '@angular/core';
import {NavController, NavParams, PopoverController, ModalController} from 'ionic-angular';
import {CreateDevicePage} from '../create-device/create-device';
import {PopoverPage} from '../../providers/popover';
import {DeviceService} from '../../providers/device-service';

@Component({
  selector: 'page-scenes',
  templateUrl: 'scenes.html',
})
export class ScenesPage {
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public modalCtrl: ModalController,
              public popoverCtrl: PopoverController,
              public deviceCtrl: DeviceService,
  ) { }
  ionViewDidLoad() { }
  launchSecondPage() {
    let modal = this.modalCtrl.create(CreateDevicePage);
    modal.onDidDismiss((data) => {

      /*Problem here*/
      this.deviceCtrl.pushDevice(data.name, data.number);
    });
    modal.present();
  }
}

Answer 1

pushDevice(name, number) {
    number.toString();
    this.devices[this.deviceCount] = new Device(); // <= add this
    this.devices[this.deviceCount].id++;
    this.devices[this.deviceCount].deviceName = name;
    this.devices[this.deviceCount].deviceNumber = number;
    this.deviceCount++;
}

also instead of devices: Array<Device>; use devices: Device[] = [];

Answer 2

You should try this:

export class Device {
  static ID: number = 0;

  private id: number;
  private name: string;
  private number: string;

  constructor(name: string, number: string) {
    this.id = Device.ID++;
    this.name = name;
    this.number = number;
  }

  public get deviceId() {
    return this.id;
  }

  public set deviceName(value: string) {
    this.name = value;
  }

  public get deviceName(): string {
    return this.name;
  }

  public set deviceNumber(value: string) {
    this.number = value;
  }

  public get deviceNumber() {
    return this.number;
  }
}

and DeviceService.ts

import {Injectable} from '@angular/core';
import {Device} from '../providers/device';

@Injectable()
export class DeviceService {
  private _devices: Device[] = [];

  public get devices() {
    return this._devices.slice();
  }

  public get deviceCount() {
    return this.devices.length;
  }

  constructor(){}

  public pushDevice(name: string, number: string) {
    this._devices = this._devices.concat(new Device(name, number));
  }
}

And if you don't do anything special inside your setters and getters of your Device class just get rid of them and use public properties:

export class Device {
   static ID: number = 0;

   private id: number;

   public name: string;
   public number: string;

   constructor(name: string, number: string) {
     this.id = Device.ID++;
     this.name = name;
     this.number = number;
   }

   public get deviceId() {
     return this.id;
   }
}

Answer 3

Correct way

in Device

id: number = 0;
name: string;
number: string;
constructor(_id:number,_name:string,_number:string) {
    this.id=_id;
    this.name = _name;
    this.number = _number;
  }

in DeviceService

devices: Array<Device> = []; 
idCount: number = 0;

pushDevice(name: string, number: string) {
    let device = new Device(this.idCount, name, number);
    this.devices.push(device);
    this.idCount++;
 }