Angular

Question

我想允许用户上传 CSV 文件。我的文件输入嵌套在父级中。我可以通过控制台在子组件中记录上传的 CSV 文件，并看到它很好，但是当我将它传递给父组件时，我收到未定义的消息。

我想我没有在父级中传递正确的值，但我不确定它应该是什么。

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);
    }

Answer 1

好的，您正在以不同的方式调用同一个方法两次：

ng提交(ngSubmit)="uploadDocument()"
点击按钮(click)="uploadDocument(fileUpload.value)"

表单提交（没有输入；因此 undefined）似乎覆盖了按钮点击。从按钮中将按钮 type="submit" 更改为 type="button"，或者也以 ngSubmit 的形式提供 fileUpload.value。

最佳方法：从按钮中删除点击处理程序并在 ngSubmit 中提供输入。 AFAIR type="submit" 有利于辅助功能

Answer 2

我假设您的组件 class 中有一个属性名称 csvRecords。因此，请尝试在您的事件发射器中发射 csvRecords。

this.onSendCSV.emit(this.csvRecords)

Answer 3

在将结果复制到 csvRecords 后，您可以尝试发射吗，即

console.log('Result', result);
 this.csvRecords = result;
 this.onSendCSV.emit(this.csvRecords);

Angular - 输出和 Eventemitter 在父级中显示未定义

Angular - Output & Event Emitter showing undefined in parent

eventemitter

typescript