Я хочу разрешить пользователям загружать файл CSV. У меня есть входной файл, вложенный в родительский. Я могу консоль регистрировать загруженный файл CSV в дочернем компоненте и видеть, что у меня все в порядке, но я получаю undefined, когда передаю его родительскому компоненту.
Я предполагаю, что я не передаю правильное значение в родительский элемент, но я не уверен, каким оно должно быть.
child.component.html
<form class=»mt-4″ [formGroup]=»csvForm» (ngSubmit)=»uploadDocument()»> <input type=’file’ name=»fileUpload» id=»txtFileUpload» #fileUpload (change)=»changeListener($event)» accept=».csv» formControlName=»csvFileUpload» required /> <button (click)=»uploadDocument(fileUpload.value)» type=»submit»>Upload </button> </form>
child.component.ts
@Output() onSendCSV: EventEmitter<any> = new EventEmitter(); changeListener($event: any): void { const files = $event.srcElement.files; this.ngxCsvParser.parse(files[0], { header: this.header, delimiter: ‘,’ }) .pipe().subscribe((result: Array<any>) => { console.log(‘Result’, result); this.csvRecords = result; }, (error: NgxCSVParserError) => { this.csvForm.controls[‘csvFileUpload’].setErrors({ csvFileUpload: true }); console.log(‘Error’, error); }); } uploadDocument(csvRecords: any) { this.onSendCSV.emit(csvRecords); }
parent.component.html
<csv-upload (onSendCSV)=»collectCSV($event)»></csv-upload>
parent.component.ts
fileUpload: any[]; collectCSV(fileUpload: any) { console.log(fileUpload); }
Дикая догадка: вы можете проверить свой импорт? Вы уверены, что импортируете правильный EventEmitter? — person Robgit28 schedule 26.04.2021
это верно? — импортировать {Component, ViewChild, Output, EventEmitter, ElementRef} из ‘@ angular / core’; — person Robgit28 schedule 26.04.2021
да, это правильный — person Robgit28 schedule 26.04.2021
this.onSendCSV.emit(this.csvRecords) можешь попробовать это один раз? — person Robgit28 schedule 26.04.2021
@iamentafaz — это сработало! Такая основная оплошность. Огромное спасибо! Будем рады отметить как принятый ответ, если вы его опубликуете — person Robgit28 schedule 26.04.2021
@ Robgit28 Отлично! Вы хотите, чтобы я добавил исправление в качестве ответа? — person Robgit28 schedule 26.04.2021
@iamentafaz, ты должен! — person Robgit28 schedule 26.04.2021
Источник: