The type 'Object' is missing the property 'properties' for this object

I am dealing with the following code snippet:

spear.ts:

export class Spears {
    constructor(
        id: string = null,
        transaction_id: string = null,
        spear_id: number = null,
        delivery_date: any = null,
        delivery_time: any = null,
        ...
    ) {}
}

Later on, I am using that class in my component.ts class and assigning it data fetched from the backend.

spear.component.ts:

export class CpCoorPenerimaanSpearDetailComponent implements OnInit {

  spear = new Spears();
  spearForm = new Spears();

  constructor() { }

  ngOnInit() {
    this._spears.getSpearDetail().subscribe(
      res => {
        this.spear = res.data;
        this.spearForm = res.data;
      }
      err => console.log(err);
    );
  }
}

Every time I try to access the value of the object, an error message appears stating that the property does not exist on type Object. For instance, when I attempt to log the 'spear_id' property right after executing spearForm = res.data, the message displayed is:

Property 'spear_id' does not exist on type 'Spears'.

I have been struggling with this issue for 5 hours now. I searched for similar questions and found suggestions to change the type of the property to 'any'. Even just trying to log the 'spear_id', which is of type number, results in a 'property does not exist' message.

What confuses me the most is that sometimes the error message disappears, but then reappears unexpectedly. Can anyone provide assistance with this?

Answer №1

Properly defining class properties

 export class Spears {
   id: string;
   transaction_id: string;
   spear_id: number;
   delivery_date: any;
   delivery_time: any;
   constructor(data) {
      this.id = data['id'] || null;
      this.transaction_id = data['transaction_id'] || null;
      // ensure all fields are mapped
   }
 }

Next

this._spears.getSpearDetail().subscribe(
  res => {
    this.spear = res.data;
    this.spearForm = new Spears(res.data);
  }
  err => console.log(err);
);

Hopefully this provides some guidance!

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

Tips for adjusting the dimensions of images in the primeng editor

Currently working on an Angular 8 application that utilizes the prime ng editor. I am looking to set limits for image size and dimensions before uploading via the upload image button, but encountering difficulties in implementing this feature. https://i.s ...

Tips for minimizing disagreements while implementing optional generic kind in TypeScript?

An issue arises in StateFunction due to its optional second generic type that defaults to a value. Even when omitting this second generic, undefined still needs to be passed as an argument, which contradicts the idea of it being optional. While making arg ...

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

Utilizing class attributes within multiple classes

I have created a custom class called MutationValidator as follows: const ERR_MSG = 'Error1'; @Service() export class MutationValidator { .. } This class is used in another class like so: import { MutationValidator } from './mutation ...

Angular Template Parsing Errors with Django REST framework: Fixing the "<" symbol

Recently, I've been working on developing a DRF API integrated with an Angular front end for one of my ongoing projects. Specifically, I have created serializers for User and Device. However, during the process, I encountered an error related to Stati ...

Issue with bidirectional data binding in Angular 2 on input element not functioning as expected

Looking at the code snippet below, I have noticed that even though the textchange function is called when the input value changes, the text property of the InputMaskComponent remains constant. I am not able to identify the issue in my code. InputMaskCompo ...

When working with Angular and either Jasmine or Karma, you might encounter the error message: "Unexpected state: Unable to retrieve the summary for the

I've been struggling to fix this error and so far, nothing I find online is helping... lr-categories.component.spec.ts: export function main() { describe('LrCategoriesComponent', () => { let fixture: ComponentFixture<LrCategori ...

Guide to defining the typescript type of a component along with its properties

I am facing an issue with my SampleComponent.tsx file: import React from 'react'; type Props = { text: string }; export const SampleComponent: React.FC<Props> = ({text})=><div>{text}</div>; SampleComponent.variant1 = ({tex ...

Angular Error: Why is the book object (_co.book) null?

The following error is displayed on the console: ERROR TypeError: "_co.book is null" View_SingleBookComponent_0 SingleBookComponent.html:3 Angular 24 RxJS 5 Angular 11 SingleBookComponent.html:3:4 ERROR CONTEXT {…} ​ elDef: ...

Unlocking the style within a .css file during an Angular unit test - here's how to do

I have been working on unit testing for an Angular app, specifically trying to access styles from a .css file within the unit test. I will share with you what I have attempted so far. component.listedIps.length=0; fixture.detectChanges(); let whitelis ...

Refresh the table following deletion of a row from firebase

I have developed an application where I display data from a firebase object in a table. However, I have encountered an issue where I need to manually refresh the page every time I remove a row from the table. Is there a way to automate this process? The sa ...

Prevent selection of items in ng-select. Modifying the default item selection behavior in ng-select

In my code, I am utilizing an angular-multiselect component to upload a list of items and populate the [data] variable of the angular-multiselect. This component displays the list of data with checkboxes, allowing me to select all, search, and perform vari ...

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Having created a custom button component, I encountered an issue when trying to handle the onClick event from outside the component. I specified the parameter type for the onClickCallback as MouseEvent<HTMLButtonElement, MouseEvent>, which is typical ...

How to determine the frequency of a specific word in a sentence using Angular 5

I need help finding a solution to count how many times a word appears in sentences. Input: k = 2 keywords = ["anacell", "cetracular", "betacellular"] reviews = [ "Anacell provides the best services in the city", "betacellular has awesome services", ...

Next.js is failing to infer types from getServerSideProps to NextPage

It seems like the data type specified in getServerSideProps is not being correctly passed to the page. Here is the defined model: export type TypeUser = { _id?: Types.ObjectId; name: string; email: string; image: string; emailVerified: null; p ...

I am interested in incorporating a delete button within my Angular application

I am working on an Angular App and I need to implement a remove button for a div element. Currently, I have an add button function in my ts file: uploads = []; addUp() { this.uploads.push(this.uploads.length); } I attempted to create the remove b ...

404 error received from Angular 2 API call despite successful testing of service

I've been attempting to make a web service call from my Angular 2 application. private baseUrl: string = 'http://localhost:3000/api'; getPatterns(): Observable<Pattern[]> { const patterns$ = this.http .get(`${this.baseUrl ...

Conceal the Nebular stepper's navigation option

I've been attempting to conceal the Nebular stepper navigation display without success. I thought setting display: none on the header class would work, but it didn't have any effect. I'd rather not have to duplicate the source code and make ...

What is the reason behind Flow's reluctance to infer the function type from its return value?

I was anticipating the code to undergo type checking within Flow just like it does within TypeScript: var onClick : (() => void) | (() => boolean); onClick = () => { return true; } However, I encountered this error instead: 4: onClick = () => ...

Determine the value of a tuple at a specific index based on its usage

How can you determine the value of a tuple at a specific index using TypeScript? class A<T extends any[]> { constructor(public a: T[0]) { } } // a should be A<[number]> let a = new A(2) // but is A<any[]> Here is an example of wha ...