Question

我正在尝试构建一个单页应用程序，它列出了我本地数据库（MongoDB）中的一些文件，但AngularJS并没有向我显示数据。当我通过Postman从Express-API获取它们时，一切都很好。我通过控制器获取它们，该控制器调用工厂并获取数据。但是当我从数据库中删除文件时，AngularJS并没有更新表格。当我重新加载页面时，它会显示没有删除项目的正确数据，但为什么双向数据绑定不起作用？

这是我的index.html中的表格内容：

  <div ng-controller="FileCtrl">
    <div ng-hide="files.length" class="alert alert-warning">Noch keine Files vorhanden!</div>
    <table ng-show="files.length" class="table">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Path</th>
        <th></th>
        <th></th>
      </tr>
      <tr ng-repeat="file in filtered = (files | filter:searchtext | orderBy: 'name')" class="files-item">
        <td>{{file._id}}</td>
        <td>{{file.name}}</td>
        <td>{{file.path}}</td>
        <td><a href class="btn btn-default btn-sm" ng-click="fileFactory.playFile(file);">Play</a></td>
        <td><a href class="btn btn-default btn-sm" ng-click="fileFactory.removeFile(file._id);">Delete</a> </td>
      </tr>
    </table>
  </div>

这是我的app.js：

angular.module('picube', [])
.factory('fileFactory', function($http) {

    var files = [];
    return {
        getFiles: function(callback) {
            $http.get('http://localhost:8080/api/files/').then(function (Response) {   //takes all files from the api, tested with postman
                files = Response.data;  //Update Data
                callback(files);
            });
        },

        postFile: function(filepath){
            $http.post("http://localhost:8080/api/files/", filepath).then(function (Response) {   //adds a new file to the server-api, tested with postman
                files = Response.data;  //Update Data
            });
        },

        playFile: function(filepath){   //this is not important at the moment
            console.log("Play called");
            console.log(filepath);
        },

        removeFile: function(_id){ //deletes a file from server, tested with postman
            $http.delete("http://localhost:8080/api/files/" + _id).then(function(callback){
                files = callback.data;  //Update Data
            });
        }
    };
})
.controller('FileCtrl', function($scope, fileFactory) {
    $scope.fileFactory = fileFactory;

    init();

    function init() {
        fileFactory.getFiles(function(files){
            $scope.files = fileFactory.files;
        });
    }
});

Answer 1

您需要使用angular.copy来保留引用，否则您将覆盖它并破坏双向绑定：

$http.get('http://localhost:8080/api/files/').then(function (Response) {   //takes all files from the api, tested with postman
   files.length = 0; // clear the array
   angular.copy(Response.data, files);  //Update Data
        ...
});

Answer 2

我使用ngresource / $ resource factory而不是$ http实现了我的数据库处理（更多信息可以通过https://docs.angularjs.org/api/ngResource/service/ $ resource＃！中的示例获得。）。

但是，它也可以用$ http工作。我做了我的＆＃34; removeFile＆＃34; -equivalent以便我实际上是在删除后使用GET从服务器读取数据，或者当数据量变大时，最好只在文件上使用splice -method [使用索引参数的数组 - 这是我提出的修改版本的建议：

...
 removeFile: function(_id, index){ //deletes a file from server, tested with postman
        $http.delete("http://localhost:8080/api/files/" + _id).then(function(callback){
            $scope.files.splice(index, 1);
        });
    }
...

并相应地在.html中，调用它来包含$ index：

...
<td>
    <a href class="btn btn-default btn-sm" ng-click = "fileFactory.removeFile(file._id, $index)">Delete</a>
</td>
...

这里的理由是我不认为你的删除方法会使用更新的完整文件列表进行响应 - 至少通常他们不会这样做但你必须自己更新本地内容。

希望这会有所帮助......

Answer 3

好的，现在可以了。问题是files.length = 0，这导致了错误。

原因是，angular.copy会清除数组本身（请参阅此处：array.copy）。这有效：

$http.get('http://localhost:8080/api/files/').then(function (Response) {
     angular.copy(Response.data, files);
});

2-Way-Databinding在工厂使用MEAN-Stack时无法在AngularJS中工作

3 个答案: