Adding an array into an object in Angular 2 using Typescript

Hey there, I'm having some trouble pushing an array into my object using Angular. It doesn't seem to be working and I'm not sure what the issue is.

Here's a snippet of my "Job" class that has multiple transactions along with the Transaction class:

export class Job {
  Id: number;
  transactions: Transaction[];
}

export class Transaction {
  transactionId: number;
  transactionTime: Date;
}

Within my component, I initialize a new empty Job instance like this... and then after the user inputs some data and clicks a button, I try to add myTransaction to myJob using this code:

myjob = new Job();
myTransaction = new Transaction();

this.myjob.transactions.push(this.myTransaction);

Although no error is thrown, when I trigger the onclick event, it seems like the page is trying to post something and then goes haywire.

Could it be a syntax error on my part?

Thank you!

Answer №1

To define transactions, simply declare it as an array in the following manner:

transactions: Transaction[] = [];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disabling the Parent Component Form Submit button until the child component fields are deemed valid

I'm currently utilizing a Template Driven Form. HTML of the Parent Component <form #BasicForm="ngForm" (ngSubmit)="onBasicDetailsSubmit()" id="BasicForm"> <app-input-text [(sharedVar)]="dashboardDetails.Text1" [isMandatory]="true" >&l ...

NativeScript Error Code NG8001: Element 'ActionBar' is unrecognized

In my project, the startupscreen module setup is as follows: import { NativeScriptFormsModule } from "@nativescript/angular"; import { NativeScriptCommonModule } from "@nativescript/angular/common"; import { NgModule, NO_ERRORS_SCHEMA } ...

Vercel: Failed to create symbolic link, permission denied

I have my personal repository available at https://github.com/Shrinivassab/Portfolio. I am currently working on developing a portfolio website. However, when I attempt to execute the vercel build command, I encounter the following error: Traced Next.js ser ...

Can you pass a generic type as a parameter for another generic in Java?

Simply provide a generic type like a callback: type FUNC<ARG,RET, F> = (arg: ARG) => F<RET>; type PROMISE<T> = Promise<T>; type IDENT<T> = T; type A = FUNC<number, void, IDENT>; type A_PROMISE = FUNC<number, void, ...

Defining a TypeScript interface specifically tailored for an object containing arrow functions

I encountered an issue while trying to define an interface for the structure outlined below: interface JSONRecord { [propName: string]: any; } type ReturnType = (id: string|number, field: string, record: JSONRecord) => string export const formatDicti ...

Can InstanceType<T> be utilized with an abstract class?

My intention is to enable it to reference implementations rather than the abstract itself, all while exclusively depending on the definitions in the abstract interface. ...

Checking React props in WebStorm using type definitions

Currently, I am utilizing WebStorm 2018.3.4 and attempting to discover how to conduct type checking on the props of a React component. Specifically, when a prop is designated as a string but is given a number, I would like WebStorm to display an error. To ...

The property of the Angular Typescript object is distinctly not defined, yet the property itself is

Currently facing a bizarre issue. Even though the console displays data in an object from a subscribed observable, TypeScript code shows it as undefined. Take a look: initData(): void { this.backendService.getData().subscribe((depotDays: DepotDayAcc ...

Utilizing Angular 2 Service for Efficient Data Exchange Among Components

I'm experimenting with data sharing between components using a shared service. Here is the service: @Injectable() export class JobService { public jobType=null; public examples=[]; } My first component sets the jobType and examples variables ...

Error in Continuous Integration for Angular 4: Unable to access property 'x' of an undefined variable

i am trying to display some data on the form but encountering an error: TypeError: Cannot read property 'title' of undefined below is my component code : book:Book; getBook(){ var id = this.route.snapshot.params['id']; ...

What steps can be taken for TypeScript to identify unsafe destructuring situations?

When working with TypeScript, it's important to prevent unsafe destructuring code that can lead to runtime errors. In the example below, trying to destructure undefined can cause a destructuring error. How can we ensure TypeScript does not compile suc ...

Utilizing the $primary SCSS variable within Angular Material 2

Currently, I am utilizing angular-cli and following the theming guide to develop a personalized theme for an angular/material2 application. Within the scss file, the primary and accent colors are linked to the $primary and $accent scss variables respectiv ...

How to retrieve the default type returned by a function using a custom TypeMap

I have a function that returns a promise with a type provided by generics. const api = <Model>(url: string) => Promise<Model> Currently, I always need to set the type of the returned data. const data = await api<{id: string, name: string ...

Dealing with Errors in Angular's HttpClient

I've been facing some challenges when it comes to running code after an error occurs in HttpClient. I need help with setting a flag that will stop a loading spinner when the HTTP call fails. My project uses RxJs 5.5.2 and Angular 5. private fetch() ...

Injecting HTTP_PROVIDERS in Angular2 rc.5 is a breeze now that Http is a module

Looking for a way to inject HTTP_PROVIDERS in Angular2 rc.5 now that everything is in modules... var injector = ReflectiveInjector.resolveAndCreate( [ TodoService, TodoAction, HTTP_PROVIDERS, // ...

Using Bootstrap and Angular4 for pagination on a div or table

In my Angular4 project, I have a collection of "cards" that I want to display on the page in sets of 6. However, traditional table pagination doesn't work for these cards since they don't fit neatly into rows and columns like table data does. Her ...

Angular 2, React, or any other modern framework.getList()?.map

I have experience working on multiple angular 1 projects and I absolutely enjoyed it. We have several upcoming projects where I need to recommend JavaScript frontend libraries/frameworks. With the decline of angular 1 and mixed reviews about angular 2&apos ...

Component-specific provider registration in Angular

Registering a provider at the component level results in a new instance of the service being created for each new instance of that component. The service becomes an instance variable of the component object, making it a dependency. This dependency can be i ...

Utilizing Typescript and Angular 2 to extract a method from another component

I have two components, A and B. I am looking to call the addMessage() method from component B within component A in a way that is reusable. Can anyone offer guidance on how to accomplish this? ...

Pattern matching for Corporate Identification Number (CIN)

I'm attempting to verify a CIN number that must adhere to a specific pattern dictated by the Indian Government. The pattern is as follows: The CIN is a 21-digit alphanumeric code. It must begin with the alphabet letter U or L. The next five character ...