如何解决 angular 中的“类型对象中不存在属性”错误？

Question

在我的应用程序中有一个父组件，其中包含代表不同水果的对象列表。 当用户选择水果时，其数据将传递给子组件，子组件将所有数据显示为详细信息。

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

在详细信息模板中：

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

'fruit' 属性在详细信息组件中设置为类型 object。 @Input()fruit: Object;

发生错误，指出Property 'description' does not exist on type 'Object' 。 不将“水果”属性设置为“对象”的数据类型可以解决问题。 但是如何在不删除数据类型的情况下解决这个问题。

Answer 1

为Fruit声明一个接口，然后将其用作您的类型：

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

@Input()fruit: Fruit;

Answer 2

如何使用 @Input()fruit: string，将您选择的水果字符串化

JSON.stringify(selectedFruit)

详细组件解析它：

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