Dati dell'interfaccia utente che aggiornano con ritardo - ng-repeat (ngAnimate issue)

Question

Ho il seguente problema e avrei bisogno di alcune opinioni sulle possibili cause/soluzioni di esso.

Ho una tabella con il suo corpo contenente un ng-ripetere

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

con un tasto di cancellazione su ogni riga:

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

e la funzione:

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

    // + DELETE API Request 
}, 

L' il problema è che anche se non aspetto la risposta della richiesta API e i dati nel modello si aggiornano immediatamente (il l ength e il contenuto dell'oggetto shoppingCart), le modifiche appaiono nell'interfaccia utente con un ritardo significativo e non istantaneamente come dovrebbe essere.

EDIT: Ho appena capito che rimuovendo angolare-animato (ngAnimate) dal progetto, il problema è risolto. Il fatto è che sto usando angolare-animato nel progetto e non riesco a rimuoverlo.

Answer 1

Quello che stai facendo, se non sbaglio, è l'eliminazione di un elemento dall'elenco dei carrelli spesa senza nemmeno controllare la risposta dall'API di cancellazione. Le possibilità sono che l'API potrebbe anche fallire e l'elemento viene eliminato nonostante ciò. Eseguire l'eliminazione in base alla risposta API, forse qualcosa di simile a -

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) 
    }); 
}, 

Dopo aver ottenuto la risposta dal tuo API di eliminazione, a seconda della risposta si potrebbe aggiornare il carrello (Cancellare dal carrello) o lancerà una errore.