Angular — вывод и эмиттер событий, показывающий undefined в родительском элементе

Я хочу разрешить пользователям загружать файл 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