Question

我有一个问题，就是我初始化的数组在函数中被视为未定义。

这是代码

import { Component, OnInit } from '@angular/core';
import { text } from '@angular/core/src/render3';
import{SheetModel} from './models/sheetModel';
import { ThrowStmt } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'AngularCSVTest';
  csvContent: string;
  detailItems:SheetModel[]=[];


  ngOnInit(){
  }

  onFileLoad(fileLoadedEvent)
  {
    //this.detailItems=[];
    const textFromFileLoaded=fileLoadedEvent.target.result;
    this.csvContent=textFromFileLoaded;
    var rows=this.csvContent.split('\n');


    for(var i:number=0;i<rows.length;i++)
    {
      var item=new SheetModel();
      var rowItems:string[];
      rowItems=rows[i].split(",");
      item.index=i+1;
      item.Make=rowItems[0];
      item.Model=rowItems[1];
      item.Colour=rowItems[2];

      this.detailItems.push(item);
    }

    this.detailItems = this.detailItems.slice();
  }

  onFileSelect(input: HTMLInputElement) {
    const files=input.files;
    var content=this.csvContent;
    if(files && files.length)
    {
      const fileToRead=files[0];
      const fileReader=new FileReader();
      fileReader.onload=this.onFileLoad;
      fileReader.readAsText(fileToRead,"UTF-8");

    }
  }
}

如您所见，我在类的顶部初始化了数组，但是当我尝试在onFileLoad函数中将其推入数组时，它是未定义的。我可以通过在函数中初始化数组来解决此问题，但这也会导致数组在我的视图中无法更新...

我在做什么错了？

Answer 1

您必须设置函数在调用期间将使用的上下文。

尝试

  onFileSelect(input: HTMLInputElement) {
    const files=input.files;
    var content=this.csvContent;
    if(files && files.length)
    {
      const fileToRead=files[0];
      const fileReader=new FileReader();
      fileReader.onload=this.onFileLoad.bind(this);  // <---- try this
      fileReader.readAsText(fileToRead,"UTF-8");

    }
  }

在定义this上下文之后，您也可以传递事件变量。 bind(this, EVENT)

数组未在函数内部定义，但在外部定义

1 个答案: