Daten von UI Aktualisierung mit Verzögerung - ng-repeat (ngAnimate Problem)

Question

Ich habe das folgende Problem und ich würde einige Meinungen über die möglichen Ursachen/Lösungen davon benötigen.

Ich habe eine Tabelle mit seinem Körper in jeder Zeile

<tr data-ng-repeat="product in shoppingCart"> ... </tr> 

mit einer Löschtaste eines ng-Repeat enthält:

<td class="total"><i data-ng-click="removeProduct(product, $index)" class="icon-remove-circle"> </i></td> 

und die Funktion:

removeProduct: function (removedProduct, index) { 
    var _this = this; 
    _this.$scope.shoppingCart.splice(index, 1); 

    // + DELETE API Request 
}, 

Der Problem ist, dass, selbst wenn ich nicht auf die Antwort der API-Anfrage warte und die Daten im Modell sofort aktualisiert werden (der l Inhalt und Inhalt des shoppingCart-Objekts), erscheinen die Änderungen in der Benutzeroberfläche mit einer erheblichen Verzögerung und nicht sofort wie es sein sollte.

EDIT: Ich habe gerade herausgefunden, dass durch das Entfernen angular-animieren (ngAnimate) aus dem Projekt, das Problem gelöst ist. Die Sache ist, dass ich angular-animate im Projekt verwende und ich kann es nicht entfernen.

Answer 1

Was Sie tun, wenn ich nicht falsch liege, ist ein Element aus Ihrer shoppingCart-Liste zu löschen, ohne sogar die Antwort von Ihrem Löschen API zu überprüfen. Möglichkeiten sind die API könnte sogar scheitern und der Artikel wird trotzdem gelöscht. Führen Sie die Löschung basierend auf der API-Antwort, vielleicht etwas ähnliches -

removeProduct: function (removedProduct, index) { 
    var _this = this; 
    $http.post('DELETE API').then(function(success) { 
     _this.$scope.shoppingCart.splice(index, 1); 
    }, function(failure) { 
     console.log("Error in deleting", failure) 
    }); 
}, 

Nachdem Sie die Antwort von Ihrem löscht API erhalten, abhängig von der Antwort, die Sie entweder den Warenkorb aktualisieren können (löschen Artikel aus dem Warenkorb) oder werfen Error.