角4ドラッグ＆ドロップ

Question

角度ドラッグ＆ドロップで問題があります。私はコンポーネントとそのディレクティブを作成しました。私は2つのソリューションを試しました。これは最初です：

@HostListener('drop', ['$event']) public onDrop(evt) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 
     this.background = '#eee'; 
     let files = evt.dataTransfer.files; 
     let valid_files: Array<File> = []; 
     let invalid_files: Array<File> = []; 
     if (files.length > 0) { 
      files.forEach((file: File) => { 
       let ext = file.name.split('.')[file.name.split('.').length - 1]; 
       if (this.allowed_extensions.lastIndexOf(ext) !== -1) { 
        valid_files.push(file); 
       } else { 
        invalid_files.push(file); 
       } 
      }); 
      this.filesChangeEmiter.emit(valid_files); 
      this.filesInvalidEmiter.emit(invalid_files); 
     } 
    } 

イメージをブラウザにドロップすると、エラーメッセージが表示されます。

files.forEach is not a function

そして、私はこのような異なるforEachの試してみました：私はすでにapp.moduleにそれをインポート

./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts
Module not found: Error: Can't resolve '@angular/router/src/utils/collection' in '/Users/MrFox/OneDrive/greenfox/hotel-booking-admin-frontend/src/app/hotels/drag-n-drop'
@ ./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts 11:0-63
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts

：

import { forEach } from '@angular/router/src/utils/collection'; 

@HostListener('drop', ['$event']) public onDrop(evt) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 
     this.background = '#eee'; 
     let files = evt.dataTransfer.files; 
     let valid_files: Array<File> = []; 
     let invalid_files: Array<File> = []; 
     if (files.length > 0) { 
      forEach(files, (file: File) => { 
       let ext = file.name.split('.')[file.name.split('.').length - 1]; 
       if (this.allowed_extensions.lastIndexOf(ext) !== -1) { 
        valid_files.push(file); 
       } else { 
        invalid_files.push(file); 
       } 
      }); 
      this.filesChangeEmiter.emit(valid_files); 
      this.filesInvalidEmiter.emit(invalid_files); 
     } 
    } 

私はこのようなエラーメッセージが表示されました。この道を。

Answer 1

私は解決策があるので、forEachの代わりに通常のforループを使用する必要があります。