如何解决:TypeError:无法将undefined或null转换为object

时间:2016-09-28 10:15:13

标签: angular typescript

我正在创建一个angular2项目,我使用ng2-uploader作为文件上传的插件。我想抓住并放弃div,同时我想在div内部上传按钮。选择要上传的文件后,我得到了错误 TypeError:无法将undefined或null转换为object

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>

组件是:

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

2 个答案:

答案 0 :(得分:2)

                   

回复:{{uploadFile | json}}

    

由于这种结构,您收到此错误,当您使用输入文件上传项目时,它将自动触发父div('ngFileDrop')。因此它将使用空数据调用该函数。这个过程会出错。

所以你可以做一件事只需将输入按钮放在父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)">

现在您可以使用一些css将输入按钮放在div中。

请检查一下。

答案 1 :(得分:0)

在您的HTML代码中,您在选项后错过了"

你写道:

<input type="file" ngFileSelect [options]="options (onUpload)="handleUpload($event)">
你应该写的:

<input type="file" ngFileSelect [options]="options" (onUpload)="handleUpload($event)">