how to save stimulsoft report js to server in angular?

I have a component for report designer and assign method to onSaveReport event but in that method my component memeber is undefined

    options: any;
    designer: any;
    public document: ReportDocument;

    reportBody = '';
    constructor() {

    }

    ngOnInit() {
        this.document = new ReportDocument();
        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = false;

        this.designer = new Stimulsoft.Designer.StiDesigner(this.options, 'StiDesigner', false);
        var report = new Stimulsoft.Report.StiReport();
        var json = { "DataSet": [{ Id: "a", Name: "A" }] }
        var dataSet = new Stimulsoft.System.Data.DataSet("JSON");

        dataSet.readJson(json)
        report.regData("JSON", "JSON", dataSet);

        report.dictionary.synchronize();
        this.designer.report = report;
        this.designer.renderHtml('designer');
        this.designer.onSaveReport = this.onReportSave;
    }

    private onReportSave(e: any) {
        this.document.body = e.report.saveToJsonString(); // error is here
        
    }
}

this is error:

Cannot set properties of undefined (setting ‘body’) TypeError: Cannot set properties of undefined (setting ‘body’) at $.onReportSave [as onSaveReport] (http://localhost:4200/features-stimulsoft-report-stimulsoft-report-module.js:1206:28) at $.invokeSaveReport (http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:82619) at $.raiseCallbackEventAsync (http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:86029) at http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:78818 at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:12178:35) at Object.onInvokeTask (http://localhost:4200/vendor.js:72788:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:12177:40) at Zone.runTask (http://localhost:4200/polyfills.js:11946:51) at invokeTask (http://localhost:4200/polyfills.js:12259:38) at ZoneTask.invoke (http://localhost:4200/polyfills.js:12248:52)`

Answer

You don’t have access to your class this inside onReportSave function because you pass your function reference to onSaveReport and since designer call your function this inside your function is belong to designer not your class and that is the cause of error this.document is undefined and you call body from an undefined, but you can change it with bind property

this.designer.onSaveReport = this.onReportSave.bind(this);

Now you set this inside your function to be this of your class.