双击Angular 2函数调用答案

【问题标题】：Angular 2 function calls on double click双击Angular 2函数调用
【发布时间】：2018-04-22 07:31:47
【问题描述】：

我正在使用 jsPDF 从 json 数据创建 pdf

    responseStatus:any= [];

   pdfDownload(){
   this._isuGeoSubunitReportService.SubmitISUGEO(this.isugeosubunitTO)
    .subscribe(data =>this.responseStatus = data,
        err => console.log(err),
       () => console.log('Request Completed222')
);
var header = [];
var data = [];
var totalData = [];

var doc = new jsPDF('p', 'pt', 'letter');
   doc.cellInitialize(); 
   doc.setFontSize(10); 

var count = 0;
for(let isugeo of this.responseStatus.dynaModel){
  count++;
  for(let isugeomap of this.generateArray(isugeo.map)){ 
     if(count==1){
     header.push(isugeomap.key); 
     } 
  }
}

 for(let isugeo of this.responseStatus.dynaModel){
   let temp = [];
  for(let isugeomap of this.generateArray(isugeo.map)){ 
     temp.push(isugeomap.value);     
  }
    data.push(temp);
}



 console.log('Request Completed2......22'+ JSON.stringify(data));
doc.autoTable(header,data,{
margin: {horizontal:1,top:1},
styles: {overflow: 'linebreak',theme: 'grid' },columnStyles: {
0: {columnHeight: 5}
}});
doc.save('Test.pdf');

}

我通过一个 html 按钮点击调用这个函数

 <button type="submit" [disabled]="!isugeoForm.form.valid" class="btn btn-
  primary"  (click)="pdfDownload()">Export pdf</button>

现在的问题是，当我第一次点击点击按钮时，数据不是从订阅块中出来的，并且在第一个“for”循环中给出了数据长度为零的错误。第二次点击按钮数据后显示。

为什么每次都需要两次点击才能生成正确的 pdf。

【问题讨论】：

标签： html json angular typescript for-loop

【解决方案1】：

它不需要“两次点击”来生成您的 PDF：我会向您解释。

首先，你创建你的变量：

responseStatus:any= [];

里面什么都没有。然后，您在点击时进行 HTTP 调用：

this._isuGeoSubunitReportService
  .SubmitISUGEO(this.isugeosubunitTO)
    .subscribe(data => this.responseStatus = data,
        err => console.log(err),
      () => console.log('Request Completed222')
    );

现在你必须明白，这是一个异步调用。这意味着，它将进行调用，但代码将继续运行！一旦响应出现，它将处理订阅中的内容。

这意味着你的代码在那之后，也就是

var header = [];
var data = [];
var totalData = [];
// ...
doc.save('Test.pdf');

将在等待回复时启动。

如果您想等待响应，您必须将所有这些代码移到订阅中，或移到调用到订阅中的函数中。

否则，您将不得不“点击 2 次”！

【讨论】：

很好的解释:)

【解决方案2】：

错误是因为您正在进行同步的 AJAX 调用并且“for”循环运行在它成功完成之前，所以this.responseStatus.dynaModel 是undefined。你需要在数据到达后执行for 循环，如下所示：

pdfDownload(){
    this._isuGeoSubunitReportService.SubmitISUGEO(this.isugeosubunitTO)
        .subscribe(data => {
            this.responseStatus = data;
            this.generatePDF();
        },
        err => console.log(err),
        () => console.log('Request Completed222')
        );
}

generatePDF() {
    var header = [];
    var data = [];
    var totalData = [];

    var doc = new jsPDF('p', 'pt', 'letter');
    doc.cellInitialize();
    doc.setFontSize(10);

    var count = 0;
    for (let isugeo of this.responseStatus.dynaModel) {
        count++;
        for (let isugeomap of this.generateArray(isugeo.map)) {
            if (count == 1) {
                header.push(isugeomap.key);
            }
        }
    }

    for (let isugeo of this.responseStatus.dynaModel) {
        let temp = [];
        for (let isugeomap of this.generateArray(isugeo.map)) {
            temp.push(isugeomap.value);
        }
        data.push(temp);
    }

    console.log('Request Completed2......22' + JSON.stringify(data));
    doc.autoTable(header, data, {
        margin: { horizontal: 1, top: 1 },
        styles: { overflow: 'linebreak', theme: 'grid' }, columnStyles: {
            0: { columnHeight: 5 }
        }
    });
    doc.save('Test.pdf');
}

【讨论】：