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

См. также:  Как запустить модель с переменными из разных фреймов данных несколько раз с lapply в R
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 3
  1. Robgit28

    Я предполагаю, что у вашего класса компонента есть свойство с именем csvRecords. Так что попробуйте испустить csvRecords в эмиттере событий.

    this.onSendCSV.emit(this.csvRecords)
    
  2. Robgit28

    Хорошо, вы вызываете один и тот же метод дважды по-разному:

    1. ngSubmit (ngSubmit)="uploadDocument()"
    2. кнопка нажмите (click)="uploadDocument(fileUpload.value)"

    Похоже, что отправка формы (которая не имеет ввода; следовательно, undefined) перезаписывает нажатие кнопки. Либо измените кнопку type="submit" на type="button" вместо кнопки, либо укажите fileUpload.value в форме ngSubmit.

    Лучший способ: удалить обработчик кликов с кнопки и предоставить ввод в ngSubmit. AFAIR type="submit" удобен для доступности

    Цените информацию о передовых методах структурирования, однако ответ @iamentafaz, похоже, устранил проблему! person Robgit28; 26.04.2021

    А, я вижу, у вас действительно есть csvRecords в качестве поля, да, это тоже решит эту проблему. person Robgit28; 26.04.2021

    Но обратите внимание, что если вы воспользуетесь этим подходом, тогда метод uploadDocument не должен принимать никаких параметров, потому что ngSubmit не предоставляет никаких входных данных. person Robgit28; 26.04.2021

  3. Robgit28

    Можете ли вы попробовать испустить после того, как результат будет скопирован в csvRecords, т.е.

    console.log('Result', result);
     this.csvRecords = result;
     this.onSendCSV.emit(this.csvRecords);
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: