[英]Property 'split' does not exist on type 'ArrayBuffer' in angular
我试图使用 Filereader 读取 CSV 文件,并希望将内容转换为数组。 我能够正确获取 CSV 文件,但是每当我想将 CSV 文件的内容转换为数组时,都会出现此错误。
为什么会出现此错误,我该如何解决?
ERROR in src/app/app.component.ts(31,10): error TS2314: Generic type 'Array<T>' requires 1 type argument(s).
src/app/app.component.ts(31,21): error TS2339: Property 'split' does not exist on type 'string | ArrayBuffer'.
Property 'split' does not exist on type 'ArrayBuffer'.
这是我的 app.component.html 文件:
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top"
alt="">
Floor Plan
</a>
</nav>
<div class="card m-5">
<div class="row row-5">
<div class="col-4">
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" (change)="upload($event.target)">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" class="btn btn-primary btn-sm">Upload </button>
</div>
</div>
</div>
<div class="col-8 border border-primary" >
{{csvContent}}
</div>
</div>
</div>
这是我的 app.component.ts 文件:
export class AppComponent {
fileToUpload: File = null;
title = 'floor-plan';
csvContent: string[] = []
upload(input: HTMLInputElement) {
const files = input.files;
var content = this.csvContent;
if (files && files.length) {
const fileToRead = files[0];
const fileReader = new FileReader();
fileReader.onload = (event) => {
this.csvContent = (event.target as FileReader).result.split('\n').map((data) => {
return data.split(',')
})
}
fileReader.readAsText(fileToRead, "UTF-8");
}
}
}
FileReader
result
属性的类型对于 TypeScript 来说很棘手,因为它取决于您在代码的其他地方调用了什么方法。
在您的情况下,您正在调用readAsText
以便您知道result
包含一个字符串,而不是一个ArrayBuffer
,但 TypeScript 不知道这一点。
您将需要类型保护或类型断言。 例如,使用类型保护:
fileReader.onload = (event) => {
const result = fileReader.result;
if (typeof result !== "string') {
throw new Error("Unexpected result from FileReader");
}
this.csvContent = result.split('\n').map((data) => {
return data.split(',')
})
};
或者使用类型断言:
fileReader.onload = (event) => {
this.csvContent = (fileReader.result as string).split('\n').map((data) => {
return data.split(',')
})
};
在上面的两个示例中,我使用了fileReader
而不是event.target
因为onload
处理程序关闭了它。
FileReader.result
在其生命周期中可以是字符串或 ArrayBuffer。 它开始是一个 ArrayBuffer,然后,在读取文件后,它被转换为一个字符串。 问题是,Typescript 不喜欢将.split()
方法应用于某个时间点可以是 ArrayBuffer 的东西。
在脚本执行的这一点,它将是一个字符串; 你知道,但 Typescript 不知道。
为了将其告知 Typescript,请将其转换为如下所示的字符串:
this.csvContent = <string>((event.target as FileReader).result).split(...)
然后打字稿应该停止抱怨:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.