TS2531：对象可能为“空”

Question

我有以下功能：-

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

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

但是在 nativeElement.files[0] 上，我收到一个打字稿错误，“对象可能是 ‘null’”。任何人都可以帮我解决这个问题吗？

我试图将 nativeElement 声明为空值，但没有成功。

感谢您的帮助和时间。

原文由 JMon 发布，翻译遵循 CC BY-SA 4.0 许可协议

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));

笔记：

“非空断言运算符”不会执行任何运行时检查，它只是告诉编译器您有特殊信息并且您知道 nativeElement.files null 。

如果 nativeElement.files 是 null 在运行时会产生错误。这不是其他语言的安全导航运算符。

原文由 Titian Cernicova-Dragomir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 {
 ...
 "angularCompilerOptions": {
 "strictNullChecks": false,
 ...
 }
}

原文由 Nitin Bisht 发布，翻译遵循 CC BY-SA 4.0 许可协议