意思是删除.只工作一次

Question

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

当我去删除一行，它删除它很好。然而，当我试图删除第二个或第三个等。它只会把它从瞄准镜中移除。我必须首先刷新，以便删除再次在服务器端工作。

下面的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;
});
});

这是怎么回事?

网站在herokuhttps://serene -弹簧- 2108. - herokuapp.com/#/

github的完整代码

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

Answer 1

我不能重现你在应用程序中得到的错误(也许是因为很多人现在正在从你的实时站点删除东西!)，但是你的服务器没有响应你的删除请求，这会导致控制台错误，也意味着你的角前端可能不同步。

首先，像这样响应express app中的请求:

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

其次，只有在确认删除成功后，才将项目从角度作用域中删除:

$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;

};

以上内容将确保您的视图是准确的，并与服务器上正在发生的事情保持一致。