“无法设置未定义的属性'处理',我是否正在接近正确解析csv?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了“无法设置未定义的属性'处理',我是否正在接近正确解析csv?相关的知识,希望对你有一定的参考价值。
我们有一个单词和类别的数据库。我的要求是允许单词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('
');
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的理解,你必须使用回调函数,因为否则你无法从文件阅读器获取信息。所以我这样做了,但那没用。
我是否正确地处理了这件事?我应该采取另一种方法,还是在这里有什么东西我不见了?
谢谢!
答案
使用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)=>{}
以上是关于“无法设置未定义的属性'处理',我是否正在接近正确解析csv?的主要内容,如果未能解决你的问题,请参考以下文章