Question

我正在服务器端使用Java编写一个互联网商店，并在客户端使用角度。在使用评论部分后，我遇到了一个问题。第二次单击“发送”按钮后，我的评论列表会刷新，并且之前写下了评论。所以，要查看我的评论，我需要先点击将其发送到服务器，然后再刷新注释数组（但第二次点击后它会发送新评论但不会渲染它）。请帮忙，我是棱角分明的新手

var productApp = angular.module('productApp', []);
productApp.controller('productCtrl', ['$scope', '$location', '$http', function ($scope, $location, $http) {
  var url = $location.absUrl() + '/comments';
  $scope.comments = [];
  function getAllComments() {
    $http.get(url).then(function (response) {
        $scope.comments = response.data;
    });
  }

  var sendComment = function () {
    var comment = {'userName': 'danko', 'content': $scope.comment};
    $http.post(url, comment);

  };
  $scope.send = function () {
    sendComment();
    getAllComments();
  };
  getAllComments();
}]);

模板：

  <ul class="media-list">
                    <li class="media">
                        <div ng-repeat="comment in comments" class="media">
                            <a class="pull-left">
                                <img class="media-object img-circle" src="/resources/img/user.png"
                                     style="width: 64px; height: 64px;">
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">{{comment.userName}}</h4>
                                     {{comment.content}}
                            </div>
                        </div>
                    </li>
                <br>
                <div class="input-group">
                        <textarea class="form-control custom-control" ng-model="comment" placeholder="Leave feedback" rows="3"
                                  style="resize:none"></textarea>
                    <span class="input-group-addon btn btn-success" ng-click="send()">Send</span>
                </div>
            </ul>

Answer 1

好像你正在并行运行这两个函数：

$scope.send = function () {
    sendComment();
    getAllComments();
};

根据您的评论，您将在发送（存储）新邮件之前收到消息。你应该做出承诺，解决这个问题：

$scope.send = function () {
    sendComment();
};
var sendComment = function () {
    var comment = {'userName': 'danko', 'content': $scope.comment};
    $http.post(url, comment).then(function(){         
        getAllComments();
    })

};

Angular代码在第二次单击后工作

1 个答案: