CODEWITHSUNDEEP
angulartypescript
samman adhikari
samman adhikari

Reputation: 651

How to resolve "property doesn't exists in type object" error in angular?

In my application there is a parent component that contains a list of objects that represents different fruits. When a user selects a fruit, its data are passed to the child component which displays all the data as details.

        <app-details 
            [fruit]="selectedFruit"
        ></app-details>

Inside the details template:

<div class="fruit-details">
    <h1>{{fruit.name}}</h1>
    <h1>{{fruit.color}}</h1>
    <h1>{{fruit.description}}</h1>
</div>

'fruit' property is set to type object in details component. @Input()fruit: Object;

An error occurs stating something like Property 'description' does not exist on type 'Object'. Not setting "fruit" property to datatype of "Object" solves the issues. But How can I solve this issue without removing the data type.

Upvotes: 0

Views: 94

Answers (3)

dayanbeni
dayanbeni

Reputation: 11

to my best knowledge and after hours of searching, all you need to do is to Declare any variable that you intend to use in your HTML at the class level of your component (where the export class definition at your type script)

I hope to hear it solved the problem to anyone Beni Dayan.

Upvotes: 0

Zze
Zze

Reputation: 18835

Declare an interface for Fruit and then use that as your type:

interface Fruit { 
    name: string;
    color: string;
    description: string;
}

@Input()fruit: Fruit;

Upvotes: 1

Nicho
Nicho

Reputation: 606

how about using @Input()fruit: string, stringify your selectedFruit 

JSON.stringify(selectedFruit)

in details component parse it :

let parseFruit = JSON.parse(this.fruit); 
console.log(parseFruit);

Upvotes: 0

Related Questions