TypeError:无法读取未定义的属性(读取“”fan“”)

Question

这是父组件模板文件。它不会产生任何问题

app.component.html

<div>

  <input type="text" [(ngModel)]="electronics.light" name="light" placeholder="light">
  <input type="text" [(ngModel)]="electronics.fan" name="fan" placeholder="fan">
  

</div>
<button (click)="display();">Display</button>
<div *ngIf="flag">
  <app-electronics-layout [images]="images" [electronicsObj]="electronics"></app-electronics-layout>
</div>

这是子组件ts文件的一部分，单击按钮时将调用display1()方法以验证电子风扇的值。

  @Input()
  electronicsObj!: electronics;

  display1(){
    console.log(this.electronics.fan);  //This is printing actual value input by user.
}

  myConfigurations:ElectronicsInterface = {
    fan: this.electronics.fan,     //this is giving TypeError
    light: this.electronics.light
  }

 


}

Answer 1

当您尝试访问electronics时，它并未定义，因此会出现此错误。

为了确保在父进程给定值后创建myConfigurations，您可以从setter初始化它：

private _electronicsObj: electronics;

get electronicsObj() {
    return this._electronicsObj;
}

@Input() set electronicsObj(electronicsObj: electronics) {
    this._electronicsObj = electronicsObj;
    this.myConfigurations = {
        fan: electronicsObj.fan,
        light: electronicsObj.light
    }
}