Angular 2 Dragula Model wird nicht korrekt aktualisiert

9

Arbeiten mit ng2-dragula. Ich freue mich, die orderNumber für jedes Element in einer Datenbank mit der neuen abgelegten Reihenfolge zu aktualisieren.

%Vor%

Die neue Modellreihenfolge, die zurückgegeben wird, spiegelt nicht die Reihenfolge in der Tasche wider.

TL; DR: hat irgendjemand eine Neuanordnung in einer Datenbank onDrop mit ng2-dragula implementiert?

    
Dan Feinstein 07.12.2016, 00:25
quelle

4 Antworten

6

Wenn Sie Objekte ziehen möchten (ohne dass sie verschwinden) UND das Ereignis dropModel auslösen:

  • Fügen Sie die Anweisungen [tulula] und [tugulaModel] in das übergeordnete Element ein. (Im Gegensatz zum aktuellen Dokument, in dem es heißt, sie in <li> zu setzen, müssen Sie sie in <ul>

  • setzen
  • Inject den DragularService und im Konstruktor Ihrer Komponente:

  • Rufen Sie die dragulaService.setOptions für die Tasche auf (Sie können ein leeres Wörterbuch übergeben). Wenn Sie es nicht aufrufen, wird dropModel callback nicht ausgelöst

  • Abonnieren Sie dropModel

Das Ergebnis:

%Vor% %Vor%     
darksider 11.12.2016 12:13
quelle
3

Ich habe endlich eine Lösung gefunden. Ich habe eine horizontale Liste. Die ersten beiden Elemente sind diejenigen, die ich ignorieren möchte, und alle haben die Klasse ignore CSS. Und alle Elemente haben die Klasse item . Also Markup:

%Vor%

Dann das TypeScript:

%Vor%     
Marçal Juan 20.01.2017 12:43
quelle
3

Ich habe die ng2-Dragula benutzt und es ist ziemlich merkwürdig bei etwas, das ich bemerkt habe. Das Problem, das ich hatte, war das gleiche. Der Serveraufruf aktualisiert das Datenobjekt nicht entsprechend der gezogenen Reihenfolge.

Ich habe gerade die if-Klausel innerhalb des ngDoCheck-Lebenszyklus-Hooks verwendet, um das Problem zu lösen.

Es ist in dem gedruckten Objekt in der Konsole sortiert. Nach dem tieferen Graben könnte ein Bit im Netzwerk herausfinden, dass das Objekt, das mit dem Update-Server-Aufruf gesendet wurde, das nicht aktualisierte war.

Das liegt daran, dass der Serveraufruf vor der Aktualisierung des Datenobjekts erfolgt.

Alles, was ich getan habe, war eine globale Variable hinzuzufügen, die den Schlepper verfolgen kann, hat das Datenobjekt aktualisiert.

%Vor%

Dann, im ngDoCheck-Lebenszyklus-Hook,

%Vor%     
Saiyaff Farouk 20.07.2017 07:28
quelle
1

Ich fand Marçals Antwort unglaublich hilfreich und habe sie sogar ein wenig erweitert, um ein Update meiner DB zu veröffentlichen, um den Sequenzwert jedes Elements (in meinem Fall Kontakte innerhalb einer Organisation) in der Liste zu aktualisieren:

HTML (Container ist die Organisation des Kontakts. Ein Kontakt kann in meinem Fall nicht zwischen Organisationen verschoben werden):

%Vor%

JS (in meinem Kontaktdienst eine PUT-Funktion, um die gespeicherten Sequenzwerte zu aktualisieren, die mit jedem meiner Kontakte verknüpft sind, so dass ihre Bestellungen bestehen bleiben):

%Vor%

}

JS (in meiner Organisationsansichtskomponente, um die Aktionen zu beschreiben, die beim Ziehen und Ablegen ausgeführt werden):

%Vor%

Hoffentlich gibt dies etwas mehr Klarheit in Bezug auf die Angelegenheit für jemand anderen an einem Ort, der dem ähnelt, wo ich mich heute befand.

    
Kate Sowles 29.03.2017 03:41
quelle