解決方法：TypeError：未定義またはnullをオブジェクトに変換できません

Question

私はangular2プロジェクトを作成していますが、ファイルアップロードのプラグインとしてng2-uploaderを使用しています。私はグラブしてdivにドロップしたいと同時に私はdiv内のアップロードボタンが欲しいです。アップロードするファイルを選択した後、エラーが発生しました TypeError：未定義またはnullをオブジェクトに変換できません。

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> 

コンポーネントは次のとおりです。あなたのHTMLコード内

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

Answer 1

応答：{{uploadFile | json}}

この構造のため、入力ファイルを使用してアイテムをアップロードすると、このエラーが発生し、自動的に親div（ 'ngFileDrop'）がトリガーされます。したがって、空のデータを持つ関数を呼び出します。このプロセスでエラーが発生します。

これで、入力ボタンを親divの外側に置き、試してみることができます。それは確かに動作します。

ここで、いくつかのCSSを使用してdiv内に入力ボタンを配置できます。

ちょうどそれをチェックしてください。

Answer 2

あなたは"オプションの後に行方不明：あなたが書いた

：

を

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

は、あなたが書かれている必要があります。

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