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 is the best method for retrieving information from a Java REST API using Angular 7?

Is SASS stylesheet supported by the Angular 2 Ahead-of-Time compiler?

Is there a way to run a node script from any location in the command line similar to how Angular's "

What is the best way to activate a submit button when at least one checkbox is selected?

Adjusting the focal point of a brochure on open street map

Error encountered when attempting to retrieve token from firebase for messaging

Creating an enum from an associative array for restructuring conditions

Streamlining the deployment process of Angular applications on IIS through automation tools such as Docker and Jenkins

Utilizing autocomplete feature for Google Maps API search within Ionic 3

Combining information from two different sources to create a more comprehensive dataset

The innerHTML inside Angular components appears scrambled, with only the final innerHTML rendering correctly

Sorting Angular data using database queries

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

Unlocking the Secrets of Passing ID Parameters Between Pages and Fetching Data from External APIs in Ionic 4

Utilizing an object's value as a key for a separate object

What is the most efficient method for validating an exception in Protractor?

How to modify the port for the inspector in ng serve configuration?

Creating a React component with a column allowing multiple checkbox selections in NextUI table

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

Error message 'Module not found' occurring while utilizing dynamic import