Question

我有以下功能： -

uploadPhoto() {
    var nativeElement: HTMLInputElement = this.fileInput.nativeElement;

    this.photoService.upload(this.vehicleId, nativeElement.files[0])
        .subscribe(x => console.log(x));
}

然而在nativeElement.files [0]上，我收到打字稿错误，＆＃34;对象可能是＆＃39; null＆＃39;＆＃34;。有人可以帮我解决这个问题吗？

我尝试将nativeElement声明为null值，但是没有成功。

感谢您的帮助和时间。

Answer 1

files被定义为FileList | null，因此它可以是null。如果您确定它不为空，则应检查null（使用if）或使用非null断言运算符（!）;

if(nativeElement.files != null) {
    this.photoService.upload(this.vehicleId, nativeElement.files[0])
        .subscribe(x => console.log(x));
}

//OR
this.photoService.upload(this.vehicleId, nativeElement.files![0])
    .subscribe(x => console.log(x));

注意非null断言运算符不会执行任何运行时检查，它只是告诉编译器您有特殊信息，并且您知道nativeElement.files在运行时不会为空。如果nativeElement.files在运行时为空，则会生成错误。这不是其他语言的安全导航操作员。

Answer 2

除了上面提到的所有答案之外，如果用户仍然不希望在其应用程序中进行严格的空检查，我们可以简单地禁用 tsconfig.json 文件中的 strictNullChecks 属性。

   col1  col2
5     6  -7.0
9     4 -78.0

Answer 3

TypeScript 3.7已于2019年11月发布。现在支持“ Optional Chaining ”，这是使用可能为空的值的最简单，最安全的方法：

您只需写：

nativeElement?.file?.name

注意问号！它们检查是否为空/未定义，并且如果所有属性（与点链接）都不为空/未定义，则仅返回该值。

代替

if(nativeElement!=null && nativeElement.file != null) {
  ....
}

但是，想象一下像这样的更复杂的事情：crm.contract?.person?.address?.city?.latlang，否则将更加冗长。

Answer 4

使用Markus的答案（引用了可选链接），我将nativeElement强制转换为HTMLInputElement，然后通过将0th与可选选项一起使用来访问.item(0)文件，从而解决了您的问题链接运算符?.

uploadPhoto() {
    var nativeElement = this.fileInput.nativeElement as HTMLInputElement

    this.photoService.upload(this.vehicleId, nativeElement?.files?.item(0))
        .subscribe(x => console.log(x));
}

Answer 5

如果您确定在所有情况下都有文件。你需要make编译器才能确定。

nativeElement.files[0] as File

抱歉，我犯了一个错误，这是更新。

(nativeElement.files as FileList)[0]

TS2531：对象可能是＆＃39; null＆＃39;

5 个答案: