I'm sorry, but it seems that the property 'propName' cannot be found in type '{}'

Question

I'm sorry, but it seems that the property 'propName' cannot be found in type '{}'

I've been working on creating a Typescript function that returns an object, but I keep encountering the following error message:

ERROR in src\app\components\model\model.component.html(3,30): : Property 'heading' does not exist on type '{}'.

Here is my function:

getTestObject(): { [key: string]: any } {
    let myObj = {};

    myObj = {
        'heading': 'My heading',
        /* Other properties here */
    };

    return myObj;
}

In my HTML file, I try to use it like this: {{ myObj.heading }}. After reading some advice on Typescript property does not exist on type {}, I made the following change:

let myObj = {};

changed to:

let myObj = {} as { [key: string]: any };

despite making this adjustment, I am still facing the same error. Where am I going wrong? Your assistance would be greatly appreciated. Thank you!

angular typescript angular5

Answer 1

Answer №1

It is crucial to make sure that you call the getTestObject() function while your component's view is loading.

I managed to successfully implement this by using a simplified version of the getTestObject() function and declaring a class member as myObj:any = {}

Below is an example of my Class:

export class MySampleClass{
    myobj:any={};
    getTestObject(){
        this.myobj = {heading:'My heading'};
        return this.myobj;
    }
    void ngOnInit() {
        this.getTestObject();
    }
}

Here is how I used template interpolation:

{{ myObj.heading }}

Answer 2

It is crucial to make sure that you call the getTestObject() function while your component's view is loading.

I managed to successfully implement this by using a simplified version of the getTestObject() function and declaring a class member as myObj:any = {}

Below is an example of my Class:

export class MySampleClass{
    myobj:any={};
    getTestObject(){
        this.myobj = {heading:'My heading'};
        return this.myobj;
    }
    void ngOnInit() {
        this.getTestObject();
    }
}

Here is how I used template interpolation:

{{ myObj.heading }}

Answer 3

Answer №2

I ran a successful test on your code at this link.

function createTestObject(): { [key: string]: any } {
  let myObject = {};

  myObject = {
    'title': 'It's Working !!'
    /* Additional properties can be added here */
  };

  return myObject;
}

let result = createTestObject();
console.log(result.title);

Answer 4

I ran a successful test on your code at this link.

function createTestObject(): { [key: string]: any } {
  let myObject = {};

  myObject = {
    'title': 'It's Working !!'
    /* Additional properties can be added here */
  };

  return myObject;
}

let result = createTestObject();
console.log(result.title);

I'm sorry, but it seems that the property 'propName' cannot be found in type '{}'

Answer №1

Answer №2

Similar questions

Two-way data binding between TypeScript and HTML FormGroups

Encountering errors when subscribing to a BehaviorSubject in Angular 8

What is the best way to export multiple modules/namespaces with the same name from various files in typescript within index.d.ts?

Leveraging a Derived-Class Object Within the Base-Class to Invoke a Base-Class Function with Derived-Class Information

Tips for customizing bootstrap cards to display on a single row with four columns

Begin by executing the angular repository on your local machine

When TableRow's onSelectChange is activated, it correctly selects the entire Table Group instead of an

How can I load a separate component.html file using a component.ts file?

Exploring the concept of abstract method generation in TypeScript within the Visual Studio Code

Converting Enum into an array in TypeScript to return the keys of the Enum

Error: `target` property is not recognized on `htmlelement` type

Getting a boolean value from an Angular 2 service function

What is the reason for receiving an error with one loop style while the other does not encounter any issues?

Hold off on progressing until the http.get request in Angular 4 has completed

Unable to locate module within an Angular 2 TypeScript class

Error Alert: Missing Provider for FormGroup!

Guide on integrating an element into a different element in a Vue 3 Tree Viewer

Issue with click function not activating in Chrome when using Angular 6

Enhancing Connectivity between Angular and Electron

Issue with Angular Routing not functioning properly when including an ID as a parameter in the URL