Angular Typerror

Question

I keep getting the error below in my code where I am trying to display a newly edited and saved text after refreshing the page. I initialized the variable, made the access variable public but nothing worked. What am I missing here?

HTML:

<p>
                <span contenteditable [textContent]="_stickerData?.StickerData" (input)="onStickerDataChange($event.target.innerHTML)">
                    {{_stickerData?.StickerData}}
                </span>
            </p>          
        </div>
        <div fxLayout="row" fxLayoutAlign="start center">
            <button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="save()"> Etiket Güncelle </button>
        </div>

TS:

public_stickerData: IStickerData = {};
Filter: IFilter = {};

@Input()
  set StickerData(prm: IStickerData) {
      if (this._stickerData != prm) {
          this._stickerData = prm;
      }
  }
  get StickerData(): IStickerData {
      return this._stickerData;
  }

 ngOnInit() {
    this._productionService.getStickerDataList(this.Filter)
    .subscribe((response: any) => this._stickerData.StickerData = response);
    
  }


 onStickerDataChange(data) {
    this._stickerData.StickerData = data;
}
save(){
    this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
        disableClose: false,
    });
    
    this.confirmDialogRef.componentInstance.confirmMessage =
    "Etiket bilgileri değiştirilecektir, emin misiniz?";

this.confirmDialogRef.afterClosed().subscribe((result) => {
    if (result) {
        this._productionService
            .saveStickerData(this._stickerData)
            .subscribe((response: IStickerData) => {
                this._stickerData = response;
                this._messages.Show(
                    "Etiket güncellendi",
                    "BAŞARILI",
                    3
    

        );
            this.cd.markForCheck();
        });
}
});

}

Service TS:

getStickerDataList(data: IFilter): Observable<IStickerData[]> {
        return this._http.post("Production/GetStickerDataList", data);
    }

Answer 1

No need to access one more deep level of the object, It is available by default as private instance. this Itself represent the class instance. You can directly access this._stickerData

ngOnInit() {
    this._productionService.getStickerDataList(this.Filter)
    .subscribe((response: any) => this._stickerData = response); // no need to use this._stickerData.StickerData
  }

Also make sure you are getting the data in the return.