[英]Angular 4 drag and drop
我对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” -下降'
@ ./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts 11:0-63
@ ./src/app/app.module.ts
@ ./src/main.ts
@多webpack-dev-server / client? http:// localhost:4200 ./src/main.ts
我已经将其导入到app.module
。
我有解决方案,您需要使用常规的for循环而不是forEach。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.