角度 7 @input属性'selected'在类型 '{}' 上不存在

Question

我是Angular的新手。我想问一下@Input("data") detailData = {};的角度。当我console.log(detailData)它时，它会出现这样的数据。

对象 { 类别： "字典"， 实体类别： 空， 图标名称： "字典D"，

详细信息： {...}， 键： "字典-7" }

当我单击console.log(detailData)中的按钮时，它显示为这样

对象 { 类别： "字典"，

实体类别： 空， 图标名称： "字典D"， 详细信息： {...}， 键： "字典-7"， 选择： 真 }

这意味着，当我单击按钮时，它会添加selected: true但是当我console.log(detailData.selected)时，它会出来

错误 TS2339：类型"{}"上不存在属性"选定"。

当我console.log(detailData.selected)它没有出现错误时，我做了什么来让它工作。

添加组件代码

export class ResultDetailsComponent implements OnInit {

@Input("data") detailData = {};
@Output() expand = new EventEmitter();
private expanded = false;
constructor() {}
// console.log(this.detailData)
ngOnInit() {
console.log(this.detailData)}
if (detailData) {
detailData.scrollIntoView()
}
}

注意：但是当我{{detailData.selected}}HTML页面时，它会出现True

希望大家能帮助我。

Answer 1

它只与detailData的类型有关，当你设置detailData属性而不定义它的类型时，打字稿将推断出值的类型基础，就像a = 10类型一样，a的类型将是一个数字，但在这里你设置的值是一个没有任何属性的空对象，所以类型将被推断为空对象，没有任何属性将类型设置为任何detail Data : any = {}将解决问题或者您可以创建结构或类的接口库，并在声明中实例化新对象。

将类型设置为任意

@Input("data") detailData : any = {}; 

将类型设置为接口

export interface DataDetail {
category?: string
entityCategory?: string,
iconName?:string, 
detail?: any, 
key?:string, 
selected?:boolean
}

元件

@Input("data") detailData : DataDetail = {};  

Answer 2

你可以尝试使用console.log(detailData['selected'])