Question

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

对象{类别：“字典”，entityCategory：null，图标名称：“ dictionaryD”，详细信息：{…}，键：“ dictionary-7”}

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

对象{类别：“字典”，entityCategory：null，图标名称：“ dictionaryD”，详细信息：{…}，键：“ dictionary-7”，选择：true}

这意味着，当我单击按钮时，它会添加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

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

将类型设置为任意

detail Data : any = {}

设置界面类型

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

组件

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

Answer 2

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

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

2 个答案: