Question

Ich habe eine Liste von Artikeln in einer Schleife. Das Array hat maximal 6 Elemente.

<div *ngFor="let item of items; let i=index"> 
<item-detail [item]="item" [dragula]='"first-bag"' [dragulaModel]='myItems' id="{{item.id}}" position={{i}}></item-detail> 
</div> 

Meine gewünschte Ausgabe ist, dass, wenn der Benutzer ein Element an einem anderen Ort zieht, wird ein API-Aufruf ausgeführt werden und der neue Auftrag wird in der Datenbank gespeichert werden.

Um dies zu tun, brauche ich die Artikel-ID und den neuen Speicherort. Die Lage muss eine Zahl von 1 bis 6 (bezogen auf, wo der Benutzer das Element gezogen ..)

Was ich bisher ist das folgende Verfahren durchgeführt:

private onDrop(args) { 
    let [e, el] = args; 
    console.log(el.id) 
    console.log(el.position) 
    } 

aber die ID und Position funktionieren nicht richtig. Ich bin mir sicher, dass es einen einfacheren, einfacheren und korrekten Weg gibt, dies zu tun.

Irgendwelche Ideen?

Answer 1

Sie benötigen dragula Richtlinie in den übergeordneten Container Ihrer Einzelteile so verschieben:

<div class="container" [dragula]='"bag-one"' [dragulaModel]='items'> 
    <div [attr.id]="item.id" [attr.title]="i" class="card-item" *ngFor="let item of items; let i=index"> 
    <item-detail></item-detail> 
    </div> 
</div> 

In yourComponent.ts

let [el, target, source] = args; 
console.log(el.id); 
console.log(el.title); 

Sie auch die Verwendung von @Input in Ihrem Artikel machen könnte -Detail-Komponente zur Eingabe der benötigten ID und Position.

<item-detail [iteminfo]="item"></item-detail> 

In Ihrem Component.ts

Import {Component, Input} from '@angular/core'; 
    @Component({....}); 
    @Input() iteminfo: Item; 

Hier ist, was ich in meinem proj tat. Für meine Eltern Komponente:

import { Component, Input } from '@angular/core'; 
import { Card } from '../model/card'; 
import { Item } from '../model/item'; 
import { dragula, DragulaService } from 'ng2-dragula/ng2-dragula'; 

@Component({ 
    selector: 'card', //parent component for item component 
    template: ` 
    <div class="items"[dragula]='"bag-one"' [dragulaModel]='card.items'> 
      <div class="card-item" *ngFor="let item of card.items; let i = index; trackBy item?.item_Id">    
       <item [item]="item" [index]="i"></item> 
      </div> 
    </div> 

}) 
export class CardComponent { 

    constructor(private dragulaService: DragulaService) 
    { 
    dragulaService.setOptions('bag-one', { 
     revertOnSpill: true 
    }); 
    dragulaService.drop.subscribe((value) => { 
     this.onDrop(value.slice(1)); 
    }); 
    } 
} 

Für die Position Komponente:

import { Component, Input } from '@angular/core'; 
import { Item } from '../model/item'; 

@Component({ 
    selector: 'item', 
    template: ` 
    {{item.title}} {{index}} 
    ` 
}) 
export class ItemComponent implements OnInit { 
    constructor(private itemSvc:ItemService) {} 

    private _index: number; 

    @Input()item: Item; 

    @Input() 
    set index(i: number) { 
    this._index = i; 
    // Do something here like save to database. 
    console.log('item index changed: ', this.item.title + i); 
    } 
    // Getter for the index Input property 
    get index(): number{ 
    return this._index; 
    } 

} 

Abschließender Hinweis: Siehe unter Cookbook bei angular.io Website „Intercept Eingangseigenschaftsänderungen mit einem Einrichter“ -> Komponenten Interaktion https://angular.io/docs/ts/latest/cookbook/

Answer 2

Ich weiß, dass dies eine Weile zurück war ... Aber ich kämpfte so hart mit etwas ziemlich genau so, hoffentlich werden andere von dem profitieren, was ich herausgefunden habe:

mein html:

<tbody [dragula]='"bag-one"' [dragulaModel]="currentWorkingData" #bag1> 
 
    <tr *ngFor="let faq of currentWorkingData; let i = index;" class="faq" [attr.data-id]="faq.id" [attr.data-index]="i" [attr.data-title]="faq.title" [attr.data-description]="faq.description"> 
 
    <td> 
 
     <span>{{ faq.title }}</span> 
 
    </td> 
 
    <td> 
 
    <button (click)="removeFaq(faq)" class="btn btn-xs btn-danger">Remove</button> 
 
    <br /> 
 
    <button (click)="editFaq(faq)" class="btn btn-xs btn-info">Edit</button> 
 
    </td> 
 
    </tr> 
 
</tbody>

Und in meiner Komponente (Typoskript) Ich habe folgendes:

export class CategoriesComponent { 
 
    categoryList: any = []; 
 
    url: string = ''; 
 
    updatedCategory: any = []; 
 

 
    constructor(private apiService: ApiService, private dragulaService: DragulaService) { 
 
    let currentCategory = this.categoryList; 
 
    this.url = apiService.urls.categories; 
 
    
 
    apiService.get(apiService.urls.categories).subscribe(
 
     data => this.loadCategories(data), 
 
     err => this.loadCategories('err')); 
 

 

 
    dragulaService.setOptions('bag-one', { 
 
     revertOnSpill: true 
 
    }); 
 

 
    dragulaService.drag.subscribe((value: any) => { 
 
     let currentCategory = this.categoryList; //onchage event ---> pushing data through 
 
    }); 
 

 
    dragulaService.drop.subscribe((value: any[]) => { //runs when item being dragged is dropped into new location 
 
     let currentCategory = this.categoryList; // --> pushing the data through 
 
     const [bagName, e, el] = value; 
 
     this.onDrop(value.slice(1)); // --> passing to onDrop 
 
    }); 
 
    } 
 

 

 
    private onDrop(args: any) { 
 
     let [el, target, source] = args; 
 
     const rowData = Array.from(target.children); 
 
     this.updatedCategory = rowData.map((row: any, index: number) => { 
 
     return { 
 
      id: row.dataset.id, 
 
      name: row.dataset.name, 
 
      sideBar: row.dataset.sidebar, 
 
      index 
 
     } 
 
     }); 
 
     return new Promise((resolve: any, reject: any) => { 
 
     this.handleSaveRequest(); 
 
     }); 
 
    } 
 

 

 
    loadCategories(res:any) { 
 
    if(res === 'err'){ 
 
     swal('Ooops!', 'Something went wrong, prease try again.', 'error'); 
 
    } else { 
 
     console.log(res); //returns the current (correct) array 
 
     for (let i = 0; i < res.categories.length; i++) { 
 
      this.categoryList.push({ 
 
      id: res.categories[i].id, 
 
      value: res.categories[i].name, 
 
      sideBar: res.categories[i].sideBar, 
 
      index: res.categories[i].index 
 
      }); 
 
     } 
 
    } 
 
    }

Das erste Mal, wenn Sie diese durchlaufen , müssen Sie manuell eine Indexnummer in sie so th Schleife Es hat einen Anfangswert (oder legt es beim Speichern in der Datenbank fest).

Und dann, wenn Sie Drag & Drop etwas ^^^ die Ondrop-Methode wird eine HandleSave-Methode auch in der gleichen Komponente (Typoskript) ... Für mich habe ich die aktuellen Werte auf der Seite durchlaufen. Ich denke, das ist wirklich die beste Art und Weise, wie Sie mehrere Dinge durch auf einmal drängen (obwohl, ich bin kein Javascript-Experte):

handleSaveRequest(): Promise <any> { 
 
     const listCatArrange = this.updatedCategory; 
 
     const { name, sideBar, id, index } = this.categoryList; 
 
     let side_bar = sideBar; 
 
     const bodyCL = { name, side_bar, index }; 
 
     return new Promise((resolve: any, reject: any) => { 
 
      let i = 0; 
 
      let processRequest =() => { 
 
      if(i < listCatArrange.length){ 
 
       let bodyList = { 
 
       name: listCatArrange[i].name, 
 
       sideBar: listCatArrange[i].sideBar, 
 
       index: listCatArrange[i].index 
 
       }; 
 
       let url = this.apiService.urls.categories; 
 
       let curId = listCatArrange[i].id; 
 
       this.apiService.patch(url + `/${curId}`, bodyList).subscribe(
 
       data => processRequest(), 
 
       err => resolve('err'), 
 
      ); 
 
       i++; 
 
       processRequest(); 
 
      } else{ 
 
       resolve(true); 
 
      } 
 
      }; 
 
      processRequest(); 
 
     }); 
 
    }

Ich hoffe, das hilft jemand da draußen. Es hat lange gedauert, bis ich das mit einem Freund herausgefunden habe. Es gibt definitiv nicht viel da draußen für die Dokumentation von dragula, wie man so etwas macht.