typescript 如何解决：TypeError：无法将未定义或空值转换为对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39744563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Resolve: TypeError: Cannot convert undefined or null to object
提问by sainu
I am creating an angular2 project and I am using ng2-uploader as the plugin for file upload. I want to drag and drop on a div and at the same time I want an upload button inside the div. After selecting a file to upload I got the error as TypeError: Cannot convert undefined or null to object.
我正在创建一个 angular2 项目，我使用 ng2-uploader 作为文件上传插件。我想在 div 上拖放，同时我想要在 div 内有一个上传按钮。选择要上传的文件后，我收到错误 TypeError: Cannot convert undefined or null to object。
Html code is:
html代码是：
<div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)">
<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">
<p><span>Response: {{ uploadFile | json }}</span></p>
</div>
Component is:
组件是：
import { Component, OnInit, NgModule, NgZone } from '@angular/core';
@Component({
selector: 'app-fileselect',
templateUrl: './fileselect.component.html',
styleUrls: ['./fileselect.component.css']
})
export class FileSelectComponent implements OnInit {
zone: NgZone;
hasBaseDropZoneOver: boolean = false;
basicProgress: number = 0;
uploadFile: any;
constructor() {
this.zone = new NgZone({ enableLongStackTrace: false });//file upload
}
options: Object = {
url: 'http://localhost:4200/assets/documents'
};
handleUpload(data): void {
if (data && data.response) {
data = JSON.parse(data.response);
this.uploadFile = data;
this.zone.run(() => {
this.basicProgress = data.progress.percent;
});
}
}
fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
}
采纳答案by Aswin KV
Response: {{ uploadFile | json }}
响应：{{ 上传文件 | json }}
Due to this structure you are getting this error, when you upload the item using input file, it will automatically trigger the parent div ('ngFileDrop'). So it will call up the function with empty data. This process will make the error.
由于这种结构，您会收到此错误，当您使用输入文件上传项目时，它会自动触发父 div ('ngFileDrop')。所以它会调用带有空数据的函数。这个过程会出错。
So you can do one thing simply place the input button out side the parent div and try. It will work for sure.
所以你可以做一件事，简单地将输入按钮放在父 div 的外面并尝试。它肯定会起作用。
<div [hidden]="!onUpload" ngFileDrop [options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)">
<p><span>Response: {{ uploadFile | json }}</span></p>
</div>
<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">
Now you can position the input button inside the div using some css.
现在您可以使用一些 css 将输入按钮放置在 div 内。
Just check it out.
看看吧。
回答by StephaneM
In your html code you're missing a "after options:
在您的 html 代码中，您缺少"after 选项：
you wrote:
你写了：
<input type="file" ngFileSelect [options]="options (onUpload)="handleUpload($event)">
you should have written:
你应该写：
<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">
