Generating and setting an object property in TypeScript at runtime

Question

Generating and setting an object property in TypeScript at runtime

In my code, I have defined an interface as follows:

export interface OurHistory {
  ourHistory?: object;
  step1?:object;
  step2?:object;
}

Within the HistoryComponent class, I am doing the following:

export class HistoryComponent implements OnInit, OnDestroy {
  myHistory:OurHistory;

  let ourHistory = [];
  ourHistory = this.allHistory.fields['ourHistory'];
  this.myHistory.ourHistory = ourHistory[0];
}

However, I encounter an error message that says "Cannot set property 'ourHistory' of undefined"

angular typescript angular7

Answer 1

Answer №1

The reason for this issue is due to the fact that on the second-to-last line in your code, this.myHistory is actually undefined. Essentially, you are attempting to access the property ourHistory of an object that does not exist according to the compiler.

To resolve this problem, it's necessary to initialize the property as stated in the comments attached to your question.

One possible solution is to modify your code like this:

export class HistoryComponent implements OnInit, OnDestroy {
  myHistory: OurHistory;

  let ourHistory = [];
  ourHistory = this.allHistory.fields['ourHistory'];
  this.myHistory = {ourHistory: ourHistory[0]};
}

By implementing this change, we create a new instance for the property myHistory:

{
   ourHistory: someValue
}

Answer 2

The reason for this issue is due to the fact that on the second-to-last line in your code, this.myHistory is actually undefined. Essentially, you are attempting to access the property ourHistory of an object that does not exist according to the compiler.

To resolve this problem, it's necessary to initialize the property as stated in the comments attached to your question.

One possible solution is to modify your code like this:

export class HistoryComponent implements OnInit, OnDestroy {
  myHistory: OurHistory;

  let ourHistory = [];
  ourHistory = this.allHistory.fields['ourHistory'];
  this.myHistory = {ourHistory: ourHistory[0]};
}

By implementing this change, we create a new instance for the property myHistory:

{
   ourHistory: someValue
}

Generating and setting an object property in TypeScript at runtime

Answer №1

Similar questions

Exploring the world of Typescript, mastering tests, and diving deep into debugging

Creating a Session Timeout feature for Ionic/Angular that includes resetting the timer with each new user interaction

Having trouble transferring data from AppComponent to a function

Click on the div in Ionic 2 to send a variable

Issues with navigation in React Native Typescript

Angular offers a simple solution for adding events to all "p", "span", and "h1" elements easily

Downloading Excel files in Angular using File Saver

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

Challenges in Angular 2

A step-by-step guide for updating a minor version of Angular with Angular CLI

Encountering a 401 error in Ionic 2 when making a post request to the WP-REST API, even though

extracting the HTML content from JavaScript and saving it into a standalone file

Navigating back to previous pages in an Angular(6) project connected to a Firebase Firestore database is a common requirement for

My NPM Install is throwing multiple errors (error number 1). What steps can be taken to troubleshoot and

Error message displayed in console due to AJV JSON schema validation when the maximum character limit is exceeded

Arrange photos in a grid using React Dropzone uploaders

Encountering an ng build error while attempting to include a factory in the providers array

How can you navigate to a particular page within a Single Page Application using NodeNS?

The declaration file for the 'react' module could not be located

using props as arguments for graphql mutation in react applications