Question

我通过浏览阅读data.csv文件的内容，然后将此文件的部分内容保存到数组中。我可以使用console.log()打印此数组，但我总是得到此数组长度的0。

这是我的代码：

app.component.html

<form id="file-input-form" #fileInputForm>
  <h6>Sample Infomation</h6>
  <div class="form-group">
      <input type="file"
      (change)="onChange($event, 'sample_info', 'not_defined')"
      class="custom-file-input"
      accept=".csv"
      required>
      <span class="custom-file-control"></span>
  </div>
</form>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public sampleInfoStatus = [];
  public sampleNameInSampleInfo = [];

    onChange(event: EventTarget, type: string, pol: string): void {
    setTimeout(() => {
      let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
      let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
      let fileNum: number = target.files.length;
      let currentFile = target.files[0];
      let _sampleNames = [];
      let _sampleInfoStatus = [];
      let si_file = target.files[0];
      let read = new FileReader();
      read.readAsBinaryString(si_file);
      read.onloadend = function() {
        let sampleInfoRaw = read.result.replace(/\r\n?/g, '\n').split('\n');
        let sampleInfo = [];
        console.log(sampleInfoRaw);
        sampleInfoRaw = sampleInfoRaw.map((x) => x.split(','));
        sampleInfoRaw.forEach(ele => {
          ele = ele.map(x => x.replace(/^\"|\"$/g, ""));
          sampleInfo.push(ele);
        })
        let title = sampleInfo[0];
        console.log(title);
        if (title[0] !== 'sample.name') {
          _sampleInfoStatus.push(7);
        }
        if (title[1] !== 'group') {
          _sampleInfoStatus.push(8);
        }
        if (_sampleInfoStatus.length === 0) {
          sampleInfo.forEach(ele => {
            _sampleNames.push(ele[0]);
          });
        }
      }

      console.log(_sampleInfoStatus);
      console.log(typeof(_sampleInfoStatus));
      console.log(_sampleInfoStatus.length);
      console.log(_sampleNames);  // length is 12
      console.log(_sampleNames.length);  //<---- here is always zero
      console.log(_sampleNames.slice(0, 5));  //<---- always []
      console.log(_sampleNames);  // length is 12
      if (_sampleInfoStatus.length !== 0) {
        this.sampleInfoStatus = Object.assign([], _sampleInfoStatus);
        console.log(this.sampleInfoStatus);
      }
      if (_sampleNames.length !== 0) {
        console.log(_sampleNames);
        this.sampleNameInSampleInfo = Object.assign([], _sampleNames);
        console.log(this.sampleNameInSampleInfo);
      }

    }, 50)
  }
}

data.csv

sample.name,group
Sample12.QC12,QC
Sample1.QC11,QC
Sample23.QC13,QC
Sample34.QC14,QC
Sample45.QC15,QC
Sample56.QC16,QC
Sample67.QC17,QC
Sample78.QC18,QC
Sample10.P03.03,P03
Sample11.P03.06,P03

以下是可以直接投放的在线代码：https://angular-tm2a6q.stackblitz.io/

最后，我写了一个读取文件的服务：所有代码都可以在这里找到：https://stackblitz.com/edit/angular-hb81p7?file=app%2Fapp.component.ts

Answer 1

您在console.log(_sampleNames.length);事件之外呼叫onloadend。

FileReader对象允许Web应用程序异步读取文件的内容

每次读取操作完成（成功或失败）时都会触发

onloadend事件。

在触发onloadend事件之前（在完成读取操作之前），剩余的代码将执行（这里是您的_sampleNames.length）。你不会得到预期的结果。您必须在onloadend事件处理程序中执行与_sampleNames数组相关的所有操作。

Answer 2

以下是此问题的快速解决方法，您还应该研究Observable.fromEvent以处理角度2 +中的此类异步情况

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public sampleInfoStatus = [];
  public sampleNameInSampleInfo = [];

  onChange(event: EventTarget, type: string, pol: string): void {
    let eventObj: MSInputMethodContext = <MSInputMethodContext>event;
    let target: HTMLInputElement = <HTMLInputElement>eventObj.target;
    let fileNum: number = target.files.length;
    let currentFile = target.files[0];
    let _sampleNames = [];
    let _sampleInfoStatus = [];
    let si_file = target.files[0];
    let read = new FileReader();
    read.readAsBinaryString(si_file);
    read.onloadend = () => {
      let sampleInfoRaw = read.result.replace(/\r\n?/g, '\n').split('\n');
      let sampleInfo = [];
      console.log(sampleInfoRaw);
      sampleInfoRaw = sampleInfoRaw.map((x) => x.split(','));
      sampleInfoRaw.forEach(ele => {
        ele = ele.map(x => x.replace(/^\"|\"$/g, ""));
        sampleInfo.push(ele);
      })
      let title = sampleInfo[0];
      console.log(title);
      if (title[0] !== 'sample.name') {
        _sampleInfoStatus.push(7);
      }
      if (title[1] !== 'group') {
        _sampleInfoStatus.push(8);
      }
      if (_sampleInfoStatus.length === 0) {
        sampleInfo.forEach(ele => {
          _sampleNames.push(ele[0]);
        });
      }
      console.log(JSON.stringify(_sampleInfoStatus));
      console.log(typeof (_sampleInfoStatus));
      console.log(_sampleInfoStatus.length);
      console.log(_sampleNames);  // length is 80
      console.log(_sampleNames.length);  // here is always zero
      console.log(_sampleNames.slice(0, 5));  // always []
      console.log(_sampleNames);  // length is 80
      if (_sampleInfoStatus.length !== 0) {
        this.sampleInfoStatus = Object.assign([], _sampleInfoStatus);
        console.log(this.sampleInfoStatus);
      }
      if (_sampleNames.length !== 0) {
        console.log(_sampleNames);
        this.sampleNameInSampleInfo = Object.assign([], _sampleNames);
        console.log(this.sampleNameInSampleInfo);
      }
    }
  }
}

有线数组的长度在angular2中始终为0

app.component.html

app.component.ts

data.csv

2 个答案: