Блог

У меня есть компонент button для импорта данных Excel и передачи данных в родительский компонент.

Я использую два компонента excel-import-btn для импорта разных данных в разные aggrid на одной странице.

второй excel-import-btn всегда вызывает первую функцию btn, но я видел, что другие атрибуты верны,

некорректна только функция emit.

(всегда смотрите «Мой заряд»)

мой код, как показано ниже:

родительский html:

 <app-ui-mainInfo></app-ui-mainInfo>
<app-ui-list-charge #myCharge></app-ui-list-charge>
<app-ui-list-item #myitem></app-ui-list-item>
  

first-component.html

 <app-btn-xlsx-client-io #impChargeBtn
            [impBtn]="impBtn"
            [expBtn]="expBtn"
            [exportDataRow]="listExportSample"
            (importFromUser)="importFromClient($event)"
>
</app-btn-xlsx-client-io>

<ag-grid-angular #listCharge ....></ag-grid-angular>
  

first-component.ts:

 importFromClient(event){
       console.log('my charge');
       this.refreshCharge(event); //refresh aggrid list of Charge
}
  

second-component.html

 <app-btn-xlsx-client-io #impVerifyBtn
            [impBtn]="impBtn"
            [expBtn]="expBtn"
            [exportDataRow]="listExportSample"
            (importFromUser)="importVerifyFromClient($event)"
>
</app-btn-xlsx-client-io>

<ag-grid-angular #listItem ...></ag-grid-angular>
  

second-component.ts

 importVerifyFromClient(event){
           console.log('my item');
           this.refreshItem(event);  //refresh aggrid list of Items
}
  

btn-xlsx-client-io.html

 <button *ngIf="impBtn != null amp;amp; impBtn.isBtnVisabled == true"
    onclick="fileXls.click();" 
    [style]="(impBtn.btnStyleCss != null amp;amp; impBtn.btnStyleCss.length > 0)? impBtn.btnStyleCss : null"
    [disabled]="(impBtn.isBtnDisabled == true) ? true : null">
    <span [style]="(impBtn.labelStyleCss != null amp;amp; impBtn.labelStyleCss.length > 0) ? impBtn.labelStyleCss : null">
        {{impBtn.labelName}}
    </span>
</button>

<input type="file" style="display:none;" id="fileXls" name="fileXls" (change)="import($event);" accept=".xls,.xlsx" />
  

btn-xlsx-client-io.ts

 @Input() public impBtn: iXlsBtnStyle;
@Input() public expBtn: iXlsBtnStyle;
@Input() public exportDataRow?: any;
@Output() public importFromUser? = new EventEmitter<iTransResult<any>>();
private xlsxClientService:XlsxClientIOService = new XlsxClientIOService();

import(formFile) {

        let transResult:iTransResult<any>;
        let tempList = [];
       
        // wire up file reader 
        //const target: DataTransfer = <DataTransfer>(formFile.target);
        const target: DataTransfer = <DataTransfer>(formFile.target);
        if (target.files.length !== 1) {
            transResult = new iTransResult<any>();
            transResult.errLog = [];
            transResult.errLog.push['Cannot use mutiple files.'];
            transResult.rc = 1;
            return transResu<
            //throw new Error('Cannot use multiple files');
        }
        
        
        const reader: FileReader = new FileReader();
        reader.onload = (e: any) => {
            // read workbook
            const bstr: string = e.target.result;
            const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

            // grab first sheet
            const wsname: string = wb.SheetNames[0];
            const ws: XLSX.WorkSheet = wb.Sheets[wsname];

            // save data
            tempList = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
            //console.log('tempList:', tempList);

            //AOA Transfer to Object
            transResult = this.xlsxClientService.AOAtoObject<any>(tempList, this.impBtn.bindPropertyMap);

            formFile.target.value = ""

            //this.importFromUser.emit(transResult);
          
        };

        reader.onloadend = (e:any) =>{
            //return the transfer object to parent-compoent
            this.importFromUser.emit(transResult);
        };
        
        reader.readAsBinaryString(target.files[0]);
        
    }////import