#angular
#angular
Вопрос:
У меня есть компонент 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