Блог

Это файл шаблона родительского компонента. Это не создает никаких проблем

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
  }

 


}
 

electronics не определяется при попытке доступа к нему, поэтому у вас есть эта ошибка.

Чтобы убедиться, что вы создадите свои настройки, как только значение будет задано родителем, вы можете инициализировать его с помощью установщика :

 private _electronicsObj: electronics;

get electronicsObj() {
    return this._electronicsObj;
}

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