javascript - ng2-dragula 的 dragulaModel 不起作用

标签 javascript angular angular2-services dragula

我正在使用 ng2-dragula对于我的项目,它对我来说效果很好。但现在我想在将元素放入包中的同时传递数据。

我在互联网上搜索并找到了 dragulaModel 但是当我尝试使用它时我的代码不起作用。 我在我的模板中完成了以下操作:

<li *ngFor="#comp of record.components | search:searchComp:true" [dragula]='"row-bag"' [dragulaModel]='record.components'>
    <p class="text-center h6" style="font-size:8px;color:blue;font-weight:bold;"> {{comp.name }}</p>                                
</li>

在我的组件中:

 dragulaService.dropModel.subscribe((value:any[]) => {
        console.log(value);
        this.dragulaService.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value:any[]) => {
        console.log(value);
        this.dragulaService.onRemoveModel(value.slice(1));
    });
    dragulaService.drag.subscribe((value: any[]) => {
        //console.log(`drag: ${value[0]}`);
        this.onDrag(value.slice(1));
    });
    dragulaService.drop.subscribe((value: any[]) => {
        //console.log(`drop: ${value[0]}`);
        this.onDrop(value.slice(1));           
    });
    dragulaService.over.subscribe((value: any[]) => {
        //console.log(`over: ${value[0]}`);
        this.onOver(value.slice(1));
    });
    dragulaService.out.subscribe((value: any[]) => {
        //console.log(`out: ${value[0]}`);
        this.onOut(value.slice(1));
    });
    dragulaService.setOptions('row-bag', {
        copy: true
    });

但是我收到了这个错误:

EXCEPTION: TypeError: Cannot read property '1' of undefined

最佳答案

此错误消息显示元素何时从具有指定模型的袋子“A”掉落到没有模型的袋子“B”中。您需要为要在其中放置元素的包“B”指定“dragulaModel”。

示例:

<div [dragula]='"bag-a"' [dragulaModel]='records' >
...
</div>

<div [dragula]='"bag-b"' [dragulaModel]='records' >
..
</div>

关于javascript - ng2-dragula 的 dragulaModel 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37410060/

相关文章:

javascript - 如何从 react native 中的 json 数据中删除 html 标签?

javascript - 对象内部的 next(){} 是什么?

angular - 如何等待 'for loop next iteration' 直到 FileReader.onload 结果获得

angular - 如何使用 AngularFire、Firestore 和 Firebase 分页到上一页

Angular 2 - 使用共享服务

javascript - 从字符串转换为 HTML 标记

javascript - NodeJS 是异步的,我的代码没有按照我期望的顺序运行

angular - 在 Angular 对话框中注入(inject)组件

javascript - Angular2,工厂守卫可能吗?

Angular 4 : how to pass an argument to a Service provided in a module file