Working with arrays in Angular 4 to include new items

Question

Working with arrays in Angular 4 to include new items

I am struggling with the code below:

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;
   }
}

I encountered an error while running this code:

CreateListFromArrayLike called on non-object

Is there a way to create a custom class and use object list instead of defining an array in this code?

Thank you

angular typescript

Answer 1

Answer №1

Indeed, there is a method to achieve this.

To start, define a class.

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

Next, import the class into your component.

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 option would be to utilize interfaces. For more information, refer to the documentation here - https://www.typescriptlang.org/docs/handbook/interfaces.html

Additionally, take a look at this intriguing question - When to use Interface and Model in TypeScript / Angular2

Answer 2

Indeed, there is a method to achieve this.

To start, define a class.

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

Next, import the class into your component.

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 option would be to utilize interfaces. For more information, refer to the documentation here - https://www.typescriptlang.org/docs/handbook/interfaces.html

Additionally, take a look at this intriguing question - When to use Interface and Model in TypeScript / Angular2

Answer 3

Answer №2

The data type of your empList is object, yet you are attempting to push strings into it

Consider using the following code snippet:

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

Answer 4

The data type of your empList is object, yet you are attempting to push strings into it

Consider using the following code snippet:

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

Answer 5

Answer №3

Add an item to your array by utilizing the following code snippet:

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;
    }
}

Answer 6

Add an item to your array by utilizing the following code snippet:

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;
    }
}

Working with arrays in Angular 4 to include new items

Answer №1

Answer №2

Answer №3

Similar questions

What steps should I take to resolve an Angular error that occurred following the installation of Font Awesome

Tips on narrowing down the type of callback event depending on the specific event name

Ionic app experiencing a CORS dilemma post-build

Retrieving the <html> tag within an Angular component

Is it possible to assign a type conditionally depending on the value of a boolean?

What is the best way to trigger a function in React when a constant value is updated?

Tips for modifying an axios instance during response interception

Exploring the Magic of Angular 5 Reactive Forms: Step-by-Step Guide to Dynamically Implement Validators and Displaying Errors upon Form Submission

Set the class function to be uninitialized

No invocation of 'invokeMiddleware' was suggested

Choosing specific information in Typescript response

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

I'm unable to import correctly using the --compiler option

Does a typescript module augmentation get exported by default when included in a component library?

Is it possible to implement a customized pathway for the functions within an Azure function app?

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

Angular: implementing lazy loading module specifically for development environment (environment.production === false)

Is there a way to inform TypeScript that the process is defined rather than undefined?

Passing props from pages to components in NextJS: A guide