Angular 4拖放

Question

I have a problem with Angular drag and drop. I created a component and a directive for it. I tried two solutions, this is the first:

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

I got an error message when I drop the image to the browser.

files.forEach is not a function

And I tried a different forEach like this:

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

This way I got an error message like this:

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

I already imported it to the app.module .

Answer 1

我有解决方案，您需要使用常规的for循环而不是forEach。