我遇到了一些Ng-dragular的问题,当你拖动时,有时候你得到一个NULL值,然后它会在一段时间后返回工作状态,不知道出了什么问题,这是问题的快照 这是Screen GIF的URL https://s2.postimg.org/ewewhmb21/dragular.gif
HTML:
<div [dragula]='"users-list-item"' [dragulaModel]="users">
<ng-template let-user let-last="last" ngFor [ngForOf]="users">
<md-list-item layout-align="row" data-id={{user?.id}}>
<span>{{user?.id}}</span>
<span>{{user?.username}}</span>
</md-list-item>
</ng-template>
</div>
打字稿:
// [bag_name, drag_item, from_container, to_container, over_item]
declare type DropArgumentType = [string, HTMLElement, HTMLElement, HTMLElement, HTMLElement];
export class UsermappingComponent {
public constructor(
private dragulaService: DragulaService,
) {
// Drop Service
dragulaService.drop.subscribe((value: DropArgumentType) => {
const drop_over_item = value[4];
// Create Object for API call
let umData: IEditUserData = {
position: 'BEFORE ' + drop_over_item.getAttribute('id'), // Sometimes this returns 'BEFORE null'
username: value[1].children[0].children[3].innerHTML
}
this.update(umData);
// sends new position value to API, so server can update the positioning
// Ex.: 'BEFORE 3' which means the element was dropped before the Element with ID of 3
});
// Over Service
dragulaService.over.subscribe((value: any) => {
this.onOver(value.slice(1));
});
// Out Service
dragulaService.out.subscribe((value: any) => {
this.onOut(value.slice(1));
});
}
private onDrag(args) {
let [e] = args;
}
private onOver(args) {
let [el] = args;
}
private onOut(args) {
let [el] = args;
}
private onDrop(args: any): void {
let [e] = args;
}
// Update User List
update(data: IUserData) {
this._usersService.editUserList(data)
.subscribe(() => {
this.refreshData();
}, (error: any) => {
console.log(error);
});
}
}