Question

我有一个使用按钮的组件：

<dx-button text="{{'VIEW_DATA.BUTTON.EXPORT_TO_EXCEL' | translate }}" type="normal" (onClick)="export()" ></dx-button>

在.ts文件中我做：

export() {
  let cells = [];
  // some code here to fill cells
  console.log('exporting component');
  this._excelExportService.exportAsExcelFile(cells, 'global_view');
}

export（）函数的服务调用是：

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats- officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelExportService {

constructor() { }

public exportAsExcelFile(json: any[], excelFileName: string, header?: any): void {
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
  const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
  const excelBuffer: any =
    XLSX.writeFile(
      workbook,
      excelFileName + '_export_' + Date.now() + EXCEL_EXTENSION,
      { bookType: 'xlsx', bookSST: false, type: 'buffer' }
  );
}
}

当我单击按钮时，export（）函数被调用两次，因此我得到两个不同的excel文件和两个console.log（）。但如果我只是评论：

export() {
  let cells = [];
  // some code here to fill cells
  console.log('exporting component');
  // this._excelExportService.exportAsExcelFile(cells, 'global_view');
}

按预期方式调用该函数一次。

为什么调用我的服务会改变我的功能？

Answer 1

您需要使用var_b.boolset_a || var_b.boolset_b。请参阅documentation

(click)="export()"

Angular 5（onClick）事件触发两次

1 个答案: