angular - Cum să rezolvi: TypeError: Nu se poate converti undefined sau null în obiect

Creez un proiect Angular2 și folosesc ng2-uploader ca plugin pentru încărcarea fișierelor. Vreau să trag și să plasez pe un div și, în același timp, vreau un buton de încărcare în interiorul div-ului. După ce selectez un fișier pentru încărcare, am primit eroarea TypeError: Cannot convert undefined or null to object.

Codul Html este:

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

Componenta este:

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

Răspuns #1

Răspuns: {{ uploadFile | json }}

Din cauza acestei structuri, primiți această eroare; atunci când încărcați elementul folosind fișierul de intrare, va declanșa automat div-ul părinte ('ngFileDrop'). Astfel, va apela funcția cu date goale. Acest proces va cauza eroarea.

Așadar, poți face un lucru: pur și simplu plasează butonul de introducere în afara div-ului părinte și încearcă. Va funcționa cu siguranță.

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

Acum poți poziționa butonul de intrare în interiorul div-ului folosind niște CSS.

Doar verifică-l.

Răspunsul #2

În codul tău HTML lipsește un " după options:

ai scris:

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

ar fi trebuit să scrii:

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