Error: The property `orderRow` in `_this.Order` is not defined

Currently, I am having some issues while working with classes:

The error message displayed is:

TypeError: _this.Order.orderRow is undefined

The error occurs when attempting to add a new row to the orderRow array.

Here is the code snippet:

Order Class

export class Order {

    public orderRow?: OrderRow[];
    public rowNumber?: number;

    constructor(values: Object = {}) {
        Object.assign(this, values);
    }

}

export class OrderRow {
    public rowNumber:number;
    public idSaleOrderRow?: number;
    public idCollection?: number;
    public idProduct?: number;
    public txtCollection?: string;
    public txtName?: string;
    public productName?: string;
    public vQty?: number;
    public vQtyFill?: number;
    public vSellPrice?: number;
    public vCustomerPrice?: number;
    public vCustomerPriceFinal?: number;

    constructor(values: Object = {}) {
        Object.assign(this, values);
    }

}

Code snippet causing error

Order: Order = <Order>{};
...............
...............
let r:OrderRow = {
              rowNumber: newRowNumber,
              idSaleOrderRow: null,
              idCollection: res.result.idCollection,
              idProduct: res.result.idProduct,
              txtCollection: res.result.txtCollection,
              txtName: res.result.txtName,
              productName: res.result.productName,
              vQty: 1,
              vQtyFill: null,
              vSellPrice: res.result.vSellPrice,
              vCustomerPrice: res.result.vSellPrice,
              vCustomerPriceFinal: res.result.vSellPrice
            };

            this.Order.orderRow.push(r);

Any suggestions on how to resolve this issue would be greatly appreciated.

Thank you for your assistance.

Answer №1

When it comes to constructing a new instance of the Order class, do not confuse casting an object literal with calling the Order constructor using the new operator:

Order: Order = new Order({});

Additionally, ensure that the orderRow fields are properly initialized:

export class Order {    
    public orderRow?: OrderRow[] = [];
}

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

When the back button is pressed on android, the navbar does not immediately refresh the active class

When using a webapp on Chrome for Android, pressing the back button results in double active items in the navbar. Clicking outside of the navbar removes the old active item. I attempted to resolve the issue by adding [routerLinkActiveOptions]="{ exact: tr ...

Exploring the implementation of window.addEventListener within an Angular project

I am currently working on testing a method in Angular using Jasmine. However, I am running into an issue with triggering the mouse event (specifically when the browser back button is clicked). Below is the code snippet I'm working with: navigate() { ...

Checking for unnecessary properties in Typescript with vue-i18n

Let's consider two different languages represented in JSON format: jp.json { "hello": "こんにちは" } ge.json { "hello": "hallo", "world": "welt" } Now, we are going to com ...

Angular 2: Issue with Component not reinitializing when query parameters change

I am currently working with Angular 2 and the latest router component to create a search functionality. Upon clicking the search button for the first time, the router navigates to the search component and retrieves data from the service. However, I have no ...

The function userRole consistently returns "user" regardless of the role being admin

I am facing an issue with the getTeamMembers() method while trying to identify which members are admins in a private team. Even though I am logged in as an admin, the userRole value always shows as "user". Can anyone assist me with this problem? import { ...

The data type returned by a method is determined by the optional parameter specified in the

I have a situation where I need to create a class with a constructor: class Sample<T> { constructor(private item: T, private list?: T[]) {} } and now I want to add a method called some that should return: Promise<T> if the parameter list ...

Instructions for sharing information between two components within a single .ts file

Currently, I am facing a challenge while working with Angular 7. I have two classes defined in the same .ts file as shown below: import { Component } from '@angular/core'; @Component({ selector: 'app-component', template: ' ...

showing pop-up notification in Angular

I am utilizing the ngx-alert service to show an error message if the supplied credentials do not match any user account in my database. This is my current process: if (this.check.data.length == 0) { this.alert.danger('User does not exist' ...

Can one bring in a JavaScript function using webpack?

I have a unique JS library called: say-my-greeting.js function SayMyGreeting (greeting) { alert(greeting); } Now I want to incorporate this function in another (.ts) file; special-class.ts import SayMyGreeting from './say-my-greeting.js' ex ...

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Curious about how to troubleshoot (or where to start) with my current Axios problem. I am working on a Next.js project (12.3) and have an axios interceptor hook that manages all of my internal requests. The interceptor functions properly on every action/pa ...

What is the best way to form a new type that encompasses all shared properties found within a union of types?

Is there a method to safely map over the union of arrays without hard-coding specific types? When attempting to calculate newArr1, an error is encountered: Property 'field2' does not exist on type 'Common<A, B>'. How can this err ...

Angular http request causing swiper to malfunction

I'm currently working on a project using Angular 9 and I've encountered an issue with integrating Swiper while utilizing *ngFor. Surprisingly, Swiper functions perfectly without any HTTP calls. However, as soon as I introduce an HTTP call, Swiper ...

Tips for sending information to a nested Angular 2 attribute component

As per the instructions found on this blog, in order to create inner components within an SVG using Angular 2, we need to utilize an [attribute] selector: // Within svgmap.component.ts file: component declaration @Component({ selector: '[svgmap]& ...

Angular 4 is having trouble retrieving the JSON response

When I attempt to log errors in a specific scenario and use error, the following error message is displayed: { "errors" : [ { "entity" : "Movement", "property" : "direction", "invalidValue" : null, "message" : "Il campo non può essere v ...

Is there a way to alter a container component depending on a condition without duplicating its content?

As I work with Component A, which serves as a container, I am faced with the challenge of selecting either ComponentA or ComponentB based on certain conditions without duplicating the content. <ComponentA *ngIf=true> ...Content </ComponentA&g ...

Navigating through multiple checkbox values in Angular 4/5

Is there a way to retrieve values from checkboxes other than just true or false? Take a look at my template below: <h4>Categories</h4> <div class="form-check" *ngFor="let cat of categories$|async"> <input class="form-check-input" ...

What could be the reason for the failed authentication HTTP request to Firebase resulting in error 400?

Ensuring the correctness of the API: ''' https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY] ''' source Verifying my API Key: https://i.sstatic.net/N4daZ.png The request made from a component: import { In ...

Delete a particular item from a JSON object in real-time using TypeScript/JavaScript

Upon examining the JSON data provided, it contains a node called careerLevels which includes inner child elements. input = { "careerLevelGroups": [ { "201801": 58, "201802": 74, ...

Creating a dynamic selection in Angular without duplicate values

How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...

Alter the style type of a Next.js element dynamically

I am currently working on dynamically changing the color of an element based on the result of a function //Sample function if ("123".includes("5")) { color = "boldOrange" } else { let color = "boldGreen" } Within my CSS, I have two clas ...