平均删除。只工作一次

Question

我有一个非常简单的 MEAN 堆栈应用程序。我快完成了，但是我有一个小错误。

当我去删除一行时，它删除得很好。但是，当我尝试删除第二个或第三个等时，它只会将其从范围中删除。我必须先刷新才能使删除再次在服务器端工作。

Angular 下面的代码

  $scope.deleteNote = function(city){


     $http({
    method: 'DELETE',
    url: '/city',
    data: city.city,
    headers:{"Content-Type": "application/json;charset=utf-8"} });


    var index = $scope.cities.indexOf(city.city);
    var cityindex = city.city;



    console.log(cityindex + " at " + index);
    console.log(cityindex);
    console.log($scope);
    $scope.cities.splice(index, 1);

};

节点端代码

app.delete('/city', function(req,res){

CityDb.findOneAndRemove({city: req.body.city}, function(err, results){
    if (err) throw err;

});

});

这是怎么回事？

heroku 上的网站 https://serene-springs-2108.herokuapp.com/#/

github 完整代码

https://github.com/jminterwebs/STBExpress/tree/MEAN/Public/javascript

Answer 1

我无法重现您在应用程序中遇到的错误（可能是因为现在有太多人从您的实时网站上删除内容！），但您的服务器没有响应您的删除请求，这会导致错误在控制台中，也意味着您的 angular 前端可能会不同步。

首先，在您的快递应用中像这样响应请求：

app.delete('/city', function(req,res){

  CityDb.findOneAndRemove({city: req.body.city}, function(err, results){

    if (err){
      res.status(500).send({error: err});
      // Assume you are going to catch this somewhere...
      throw err;
    }

    else
      res.status(200).send();

  });

});

其次，只有在确认删除成功后才将项目从您的 angular 范围中删除：

$scope.deleteNote = function(city){

  // Make the request
  $http({
    method: 'DELETE',
    url: '/city',
    data: city.city,
    headers:{"Content-Type": "application/json;charset=utf-8"} 
  })
  // On success:
  .then(function (){
    var index = $scope.cities.indexOf(city.city);
    var cityindex = city.city;
    $scope.cities.splice(index, 1);
  })
  // On error:
  .catch(function (){
    // Do something better than this:
    alert("Something bad happened");
  })

  .finally(function (){
    // Re-enable the button.
    city.deleting = false;
  })

  // Disable the delete button and show a loading animation based on
  // this value (use `ng-disabled`).
  city.deleting = true;


};

以上内容将确保您的观点准确并与服务器上发生的事情保持一致。

平均删除。只工作一次

MEAN delete. Only working once

node.js

angularjs

mean-stack