typescript - Dra og slipp fra Tree-komponent til DataTable

Jeg vil bruke Dra og slipp fra Tree-komponenten til DataTable. Hvordan kan jeg gjøre det? Jeg bruker PrimeNG, men noe er galt. Jeg får ingen feil etter kompilering, men dataene mine blir ikke dratt. Hva er galt?

Min kode:

dra.og.slipp.ts

import { Component, OnInit } from '@angular/core';
import {Tree} from 'primeng/primeng';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import {Draggable,Droppable} from 'primeng/primeng';
import {ObjectsService} from "../app.tree/objects.service";
import {ClassObject} from "./class.object";

@Component({
selector: 'drag-drop',
template: `
    <p-growl [value]="msgs"></p-growl>
    <div class="row">
        <div class="col-md-6 col-xs-12" style="height: 600px">
            <div class="panel">
                <div class="panel-heading">
                    <label class="col-md-offset-5 col-xs-offset-5">Все объекты</label>
                </div>
                <div class="panel-body">
                     <p-tree [value]="availableObjects" [style]="{'width':'470px','height':'530px'}"
                      selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)"
                     pDraggable="classObjs" (onDragStart)="dragStart($event)" (onDragEnd)="dragEnd($event)"></p-tree>
                     Selected Node: {{selectedFile ? selectedFile.label : 'none'}}
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12" style="height: 600px;">
            <div class="panel">
                <div class="panel-heading">
                    <label class="col-md-offset-2 col-xs-offset-5">Объекты, которые относятся к классу</label>
                </div>
                <div class="panel-body" pDroppable="classObjs" (onDrop)="drop($event)"
                       [ngClass]="{'ui-state-highlight':draggedObject}">
                    <p-dataTable [value]="selectedObject">
                        <p-column field="name" header="Наименование"></p-column>
                        <p-column field="dBegin" header="Дата начала"></p-column>
                        <p-column field="dEnd" header="Дата окончания"></p-column>
                    </p-dataTable>
                    <div class="row" style="position: absolute; bottom: 0px;">
                        <p class="col-lg-1" style="height: 30px; width: 5px; border: 1px solid #000; background: #90E803"></p>
                        <label class="col-lg-7" style="font-size: 12px;"> - новые записи</label>
                        <a title="Корзина" type="button" class="col-lg-3 btn btn-lg" style="color: #000; float: right;">
                            <span class="glyphicon glyphicon-trash"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>    
`,
directives: [Tree, DataTable, Column, Draggable, Droppable]
})
export class DragAndDrop implements OnInit {

availableObjects: ClassObject[];

selectedObjects: ClassObject[];

draggedObject: ClassObject;

constructor(private objectService: ObjectsService){}

ngOnInit() {
    this.selectedObjects = [];
    this.availableObjects = this.objectService.getObjects();
}

dragStart(event, classObj: ClassObject){
    this.draggedObject = event.node;
}

drop(event) {
    if(this.draggedObject) {
        this.selectedObjects.push(this.draggedObject);
        this.availableObjects.splice(this.findIndex(this.draggedObject), 1);
        this.draggedObject = null;
    }
}

dragEnd(event) {
    this.draggedObject = null;
}

findIndex(event) {
    let index = -1;
    for(let i = 0; i < this.availableObjects.length; i++) {
        if(event.node.label === this.availableObjects[i].label) {
            index = i;
            break;
        }
    }
    return index;
}
nodeSelect(event) {
    console.log(event.node);
}
}

object.service.ts

import { Injectable } from '@angular/core';
import {ClassObject} from "../app.drag.and.drop/class.object";

@Injectable()
export class ObjectsService {
getObjects():ClassObject[] {
    return [
        {
            "label": "1",
            "data": "Documents Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [
                {"label": "2", "icon": "fa-file-o", "data": "Expenses Document"},
                {
                    "label": "3",
                    "data": "Documents Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children":[
                        {"label": "4", "icon": "fa-file-o", "data": "Expenses Document"},
                        {"label": "5", "icon": "fa-file-o", "data": "Expenses Document"},
                    ]
                },
            ]
        }
    ]
}
}

klasse.objekt.ts

import {TreeNode} from "primeng/primeng";

export interface ClassObject {
label?: string;
icon?: any;
expandedIcon?: any;
collapsedIcon?: any;
children?: TreeNode[];
leaf?: boolean;
data: any;
}

Svar #1

Prøv å legge til draggableNodes="true" & droppableNodes="true".

<p-tree [value]="files" 
                    selectionMode="multiple" 
                    [(selection)]="selectedFiles" 
                    (onNodeSelect)="nodeSelect($event)"
                    draggableNodes="true"
                    droppableNodes="true"
                    [contextMenu]="cm">

Relaterte artikler