Javascript 角度5（onClick）事件触发两次

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

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

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');
}

正如预期的那样，该函数只调用一次

为什么对我的服务的调用正在更改我函数的行为？

您需要使用

（单击）=“export（）”

。指

它可以工作。我使用了我正在使用的库的文档中提到的（onClick）：但它似乎更适合常规（click）事件：-）

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

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