Nano Hash - криптовалюты, майнинг, программирование

получить значение из FileReader в Angular 2

У меня есть следующий компонент, который загружает файл и связывает его содержимое как строку

    export class NgCsvComponent {

        @Input() csv: any;

        @Output() csvChange: any = new EventEmitter();

        public localCsv : any = '';

      constructor() { }

      changeListener($event): void {
        this.readFile($event.target);
      }

      readFile (inputValue : any) : void {
        let reader = new FileReader (),
              file : File = inputValue.files[0];
          reader.readAsText(file);    
        reader.onload = this.onLoadCallback;
      }

        onLoadCallback (event) {
            this.csvChange.emit(event.target["result"]);
        }
    }

проблема в том, что this.csvChange не определено внутри onLoadCallback, так как я могу передать результат какой-либо переменной в моем компоненте?

Я искал другой подобный вопрос, но так и не получил результат за пределами onloadCallback функция

typescript angular filereader
11.10.2016

Ответы:


1

Проблема в том, что контекст теряется, когда вы делаете:

reader.onload = this.onLoadCallback;

Одно решение:

reader.onload = (e: Event) => {
    this.onLoadCallback(e);
}

Другой:

reader.onload = this.onLoadCallback.bind(this);

Еще один такой:

onLoadCallback = (event) => {
    this.csvChange.emit((event.target as FileReader).result);
}

Нижняя линия. Убедитесь, что контекст this всегда остается внутри вашего файла class.

11.10.2016
  • Отличная реализация - особенно нравится второе решение. Спасибо 18.07.2019
  • Я пытался использовать event.target.result и всегда показывал ошибку, пока не изменил его на event.target["result"]. Благодарю вас! 11.11.2019
  • @Akhil Это потому, что event.target набирается как EventTarget, и у него нет свойства result. Сначала вы должны привести его к FileReader, например: (event.target as FileReader).result 11.11.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..