Я хочу разрешить пользователям загружать файл 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
Я предполагаю, что у вашего класса компонента есть свойство с именем
csvRecords
. Так что попробуйте испуститьcsvRecords
в эмиттере событий.Хорошо, вы вызываете один и тот же метод дважды по-разному:
(ngSubmit)="uploadDocument()"
(click)="uploadDocument(fileUpload.value)"
Похоже, что отправка формы (которая не имеет ввода; следовательно,
undefined
) перезаписывает нажатие кнопки. Либо измените кнопкуtype="submit"
наtype="button"
вместо кнопки, либо укажитеfileUpload.value
в формеngSubmit
.Лучший способ: удалить обработчик кликов с кнопки и предоставить ввод в
ngSubmit
. AFAIRtype="submit"
удобен для доступностиЦените информацию о передовых методах структурирования, однако ответ @iamentafaz, похоже, устранил проблему! — person Robgit28; 26.04.2021
А, я вижу, у вас действительно есть
csvRecords
в качестве поля, да, это тоже решит эту проблему. — person Robgit28; 26.04.2021Но обратите внимание, что если вы воспользуетесь этим подходом, тогда метод
uploadDocument
не должен принимать никаких параметров, потому чтоngSubmit
не предоставляет никаких входных данных. — person Robgit28; 26.04.2021Можете ли вы попробовать испустить после того, как результат будет скопирован в csvRecords, т.е.