崩溃的Stimulsoft报表查看器

Question

我在一个角形5项目中使用Stimulsoft，首先我创建了一个按钮(在引导选项卡内)，然后单击，它触发一个函数来生成报告

​

和按钮html代码：

 <ngb-tab>
   <ng-template ngbTabTitle ><b>Report</b></ng-template>
    <ng-template ngbTabContent>

        <button (click)="generateReport()"  class="btn m-btn btn-danger" 
           id="generateReport">
            <span>
               <i class="la la-eye"></i>
            <span> Generate Report</span>
          </span>
        </button>   
        <div id="Report"></div>

    </ng-template>
 </ngb-tab>

和通过单击(Generate )：来触发的函数

generateReport() {

    this.ExportImageForReport();
    let sol = this.solution;

    setTimeout(() => {
            let HS = this.body.hotStreams.map(a => { let obj = { Name: a.name, 
                   Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty 
                 / 1000000) * 10) / 10 }; return obj });
            let CS = this.body.coldStreams.map(a => { let obj = { Name: a.name, 
                   Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty 
                / 1000000) * 10) / 10 }; return obj });


            let Solution = {
                Results: {
                    IntervalTemp: sol.IntervalTemp,
                    HotInterval: sol.HotIntervalTemp,
                    ColdInterval: sol.ColdIntervalTemp,
                    HotDuty: Math.round((sol.Qhot / 1000000) * 10) / 10,
                    ColdDuty: Math.round((sol.Qcold / 1000000) * 10) / 10,
                },
                Units: {
                    temperature: this.Units.temperature,
                    duty: this.Units.duty
                },
                HotStreams: HS,
                ColdStreams: CS,
                Diagrams: {
                    HT_Diagram: this.HT_img,
                    GCC_Diagram: this.GCC_img,
                    Grid_Diagram: this.Grid_img,
                },
                UserData: {
                    username:this.username,
                    email:this.email
                }
            }

            fileName = "ByStreamReport"
            let report = new Stimulsoft.Report.StiReport();
            report.loadFile("./assets/stimulsoft/name.mrt");

            let dataSet = new Stimulsoft.System.Data.DataSet("Solution");
            dataSet.readJson(Solution);
            report.regData("Solution", "Solution", dataSet);

            let options = new Stimulsoft.Viewer.StiViewerOptions;
            let viewer = new Stimulsoft.Viewer.StiViewer(options);
            viewer.report = report;
            viewer.renderHtml("Report");

    },6000)
 }

在此之后，报表查看器将在一个新的浏览器选项卡中打开，而不是在引导选项卡内，浏览器会像下图所示的那样崩溃，两个菜单出现在顶部和按钮上，当我以pdf格式导出报表时，所有的数据都正常，所有的数据都在它的位置，

​

我想要的是报表查看器加载在(Generate )下面，就像它在html代码中的位置一样，假设。

如果你看到我的帖子丢失了一条信息，请一直到我，我会立即编辑它。

Answer 1

唯一的问题是，在单击按钮后，我创建了一个报表和选项实例，导致查看器崩溃，

只需将报表和查看器的实例创建为类中的属性即可解决此问题。

  export class SolutionComponent implements OnInit {

         viewer: any = new Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
         report: any = new Stimulsoft.Report.StiReport();

         generateReport() { 
           // the rest of the code 
         }

现在，它在页面和选项卡中运行良好。

​

​