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

Question

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

Object { category: "dictionary", entityCategory: null, iconName: "dictionaryD", detail: {…}, key: "dictionary-7" }

当我点击 console.log(detailData) 中的按钮时它显示如下

Object { category: "dictionary", entityCategory: null, iconName: "dictionaryD", detail: {…}, key: "dictionary-7", selected: true }

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

error TS2339: Property 'selected' does not exist on type '{}'.

当我 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()
         }
}

注意: 但是在 HTML 页面中，当我 {{detailData.selected}}它出来了True

希望大家能够帮助我。

Answer 1

它仅与 detailData 的类型相关，当您设置 detailData 属性而不定义它的类型时， typescript 将推断该值的类型基础，例如 a = 10 a 的类型将是一个数字，但在这里您将值设置为没有任何属性的空对象，因此该类型将被推断为没有任何属性的空对象将类型设置为任何 detail Data :any = {} 将解决问题，或者您可以创建结构或类的接口(interface)基础，并在声明处实例化新对象。

将类型设置为任意

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

设置接口(interface)类型

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

组件

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