“无法设置未定义的属性'处理'，我是否正在接近正确解析csv？

Question

我们有一个单词和类别的数据库。我的要求是允许单词admin通过csv文件一次添加多个单词。目前，我们有一个可以一次添加单词的系统。所以我的想法就是在csv文件中多次调用该函数作为单词。

这是我的组件文件构造函数和注入

export class AdminComponent implements OnInit {
  currentJustify = 'start';
  processing = false;
  error = false;
  errorAdd = false;
  word: IWord;
  showTable = false;


  @Input() wordArea: string;
  @Input() idArea: number;

  addWordMessage: string;


  categoryItems: string[] = ['Category...', 'awl','stem', 'hi', 'med', 'low'];
  category: string = this.categoryItems[0];

  sessionHistory: string[] = [];
  index = 1;

  constructor(private _admin: AdminService, public router: Router) { }

现在这是我将迭代调用的函数。

 addWord(wordArea:string, category:string): void {
    this.processing = true;
    this.error = false;
    this.errorAdd = false;
    this._admin.postWord(wordArea, category)
      .subscribe
      (res => {
        this.processing = false;
        this.sessionHistory[this.index] = wordArea + ' is added to ' + category + ' category.'
        this.index++;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('Client-side Error occured');
        } else {
          this.errorAdd = true;
          this.processing = false;
          console.log('Server-side Error occured');
        }
      }
      );
  }

这些是我迄今为止创建的函数：

 fileUploadListener($event:any):void{

    this.csvadd($event.target, this.addWord);
    console.log('out of it');

   }

  csvadd(csv: any, callback): void { console.log('here')
    var file:File = csv.files[0];
    var self = this;
    var reader:FileReader = new FileReader();
    var wordArea:string;
    var category:string;
    var array;
    var fields;
    this.processing = true;
    this.error = false;
    this.errorAdd = false;

    console.log('here 2')

    reader.readAsText(file);

    reader.onloadend = function (e) {
             var csvData = reader.result;
             console.log(csvData);
             fields = csvData.split('\n');


             for (let i in fields) {
              console.log('in loop'); 
              var array = fields[i].split(',');
              console.log(array);
              wordArea=array[0];
              console.log(wordArea);
              category=array[1];
              console.log(category);
              callback(wordArea, category);
              console.log('final')}

         };

         reader.onerror = function () {
             console.log('Unable to read ' + file);
         };



  }

根据我从弄清楚如何使用Typescript和Javascript的理解，你必须使用回调函数，因为否则你无法从文件阅读器获取信息。所以我这样做了，但那没用。

我是否正确地处理了这件事？我应该采取另一种方法，还是在这里有什么东西我不见了？

谢谢！

Answer 1

使用bind或使用箭头发送回调函数，因为this将引用函数而不是您希望它引用的类。

this.csvadd($event.target, this.addWord.bind(this));

要么

this.csvadd($event.target, (wordArea, category)=>this.addWord(wordArea,category));

也改变

 reader.onloadend = function(e){}

至

 reader.onloadend =(e)=>{}