Add items in array angular 4

Question

I have following code

export class FormComponent implements OnInit {
  name: string;
  empoloyeeID : number;
  empList: Array<{name: string, empoloyeeID: number}> = []; 
  constructor() {
  }

ngOnInit() {
  }

onEmpCreate(){
   console.log(this.name,this.empoloyeeID);
   this.empList.push.apply(this.name,this.empoloyeeID);
   this.name ="";
   this.empoloyeeID = 0;
   }
}

but this throwing error

CreateListFromArrayLike called on non-object

Also is there any way to create a custom class and used object list rather than defining array over here.

Thanks

Srinivas Valekar · Accepted Answer · 2017-11-03T07:26:00.687

58

Yes there is a way to do it.

First declare a class.

//anyfile.ts
export class Custom
{
  name: string, 
  empoloyeeID: number
}

Then in your component import the class

import {Custom} from '../path/to/anyfile.ts'
.....
export class FormComponent implements OnInit {
 name: string;
 empoloyeeID : number;
 empList: Array<Custom> = [];
 constructor() {

 }

 ngOnInit() {
 }
 onEmpCreate(){
   //console.log(this.name,this.empoloyeeID);
   let customObj = new Custom();
   customObj.name = "something";
   customObj.employeeId = 12; 
   this.empList.push(customObj);
   this.name ="";
   this.empoloyeeID = 0; 
 }
}

Another way would be to interfaces read the documentation once - https://www.typescriptlang.org/docs/handbook/interfaces.html

Also checkout this question, it is very interesting - When to use Interface and Model in TypeScript / Angular2

edited Nov 03 '17 at 07:26

answered Nov 03 '17 at 07:06

Srinivas Valekar

1,083
10
19

It says Custom.ts is not a module – Md. Parvez Alam Nov 03 '17 at 08:31
I think you are trying to import from Custom.ts file, where exactly did you put your Custom class? – Srinivas Valekar Nov 03 '17 at 08:32
Many thanks, restarting many times vs code worked. Very very thank your for other refrences – Md. Parvez Alam Nov 03 '17 at 08:43

score 14 · Answer 2 · answered Nov 03 '17 at 06:58

14

Your empList is object type but you are trying to push strings

Try this

this.empList.push({this.name,this.empoloyeeID});

answered Nov 03 '17 at 06:58

Saurabh Agrawal

7,581
2
27
51

Faly · Answer 3 · 2017-11-03T07:10:49.283

Push object into your array. Try this:

export class FormComponent implements OnInit {
    name: string;
    empoloyeeID : number;
    empList: Array<{name: string, empoloyeeID: number}> = []; 
    constructor() {}
    ngOnInit() {}
    onEmpCreate(){
        console.log(this.name,this.empoloyeeID);
        this.empList.push({ name: this.name, empoloyeeID: this.empoloyeeID });
        this.name = "";
        this.empoloyeeID = 0;
    }
}

Add items in array angular 4

3 Answers3