Angular 4拖放

Question

我在使用 Angular 拖放时遇到问题。我为它创建了一个组件和一个指令。我尝试了两种解决方案，这是第一种：

@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 不是函数

我尝试了不同的 forEach，如下所示：

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

这样我收到了这样的错误消息：

./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts
未找到模块：错误：无法解析 '/Users/MrFox/OneDrive/greenfox/hotel-booking-admin-frontend/src/app/hotels/drag-n 中的 '@angular/router/src/utils/collection' -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

我已经将它导入到app.module。

Answer 1

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