Question

标题可能听起来有点奇怪但是它是怎么回事。

代码：

angular.module('app')


.controller('TenantsCtrl', ['$scope', 'tenantsService','$window','loginService', function ($scope, tenantsService, $window, loginService) {
    $scope.mode = "list";
    $scope.g = [];
    $scope.editTenant = {
      firstName: "",
      lastName: "",
      room: "",
      to: "",
      from: ""
    }
    tenantsService.get().then((data) => {
        data.tenants.map((tenant) => {
          tenant.to = new Date(tenant.to).toLocaleDateString('ro-RO')
          tenant.from = new Date(tenant.from).toLocaleDateString('ro-RO')
        });
        console.log(typeof data.tenants);
        $scope.g = data.tenants;
        console.log($scope.g)
      }).catch((reason) => {
        loginService.doLogout();
        if(confirm(`${reason}. Please login`)) {
          $window.location.href="#!/login";
        }
      })
  $scope.showTenantForm = function(tenant) {
    console.log($scope.g)
  }


 }]);

查看：

<div class="page-header">
    <h1>Cazati <button class="btn btn-xs btn-primary" ng-click="showTenantForm()">Cazeaza</button></h1>
</div>
<div class="row"  ng-cloak>
    {{g}}
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Nume</th>
                <th>Camera</th>
                <th>Cazat din</th>
                <th>Cazat pana la</th>
                <th>Cazat de</th>
                <!--<th>Status</th>-->
                <th>Modifica</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in g">
                <td>{{x.lastName}} {{x.firstName}}</td>
                <td>{{x.room}}</td>
                <td>{{x.to}}</td>
                <td>{{x.from}}</td>
                <td></td>
                <td>
                    <button type="button" ng-click="editTenant(tenant.id)" class="btn btn-danger btn-xs">Modifica</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

问题：表格中的数据未显示。奇怪的是，只有当从标题按下按钮并且函数被调用时才会显示它。

来自服务的数据正确无误。

更新：tenantsService

angular.module('app')
.service('graphQLService', ['baseUrl', 'loginService', function (baseUrl, loginService) {
  var graphQLService = {};
  graphQLService.sendQuery = function (query, vars) {
    var self = this;
    vars = vars || {};
    return new Promise(function(resolve, reject) {
      // use fetch to get the result
      fetch(baseUrl + '/gql', {
        method: 'post',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          query,
          vars,
          authToken: loginService.getToken()
        })
      })

      .then(function(response) {
        var status = response.status;
        if(status != 401) {
          return response.json().then((res) => {
            resolve(res.data);
          })
        } else {
          reject(response.statusText);
        }
        if(response.status == 401) {

        }
      })
      .catch(reject);
    });
  };
  return graphQLService;
}]);

Answer 1

在收到回复并操纵数据后添加$scope.$apply()，然后将数据分配到g范围变量。所以：

$scope.g = data.tenants;
$scope.$apply();

AngularJS已经在$scope.$apply方法中包含了很多代码。这是为了触发$scope.$digest方法，该方法负责刷新相关范围内的所有绑定并更新值等视图。例如，如果您使用的是自定义$http服务，则会在$scope.$apply内执行，因此您无需明确调用它。在您的情况下，您没有使用标准$http，因此您需要手动触发它。

代码在调用另一个函数后正在工作，因为ng-click也包含在$apply内，因此它会刷新范围内的所有绑定。

如果您想了解更多相关内容，这是一篇非常好的文章：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

我希望它有所帮助

Answer 2

我认为问题是data.tenants.map会返回一个新数组。你没有保存对它的引用。

你试过这个吗？

$scope.g = data.tenants.map((tenant) => {
      tenant.to = new Date(tenant.to).toLocaleDateString('ro-RO');
      tenant.from = new Date(tenant.from).toLocaleDateString('ro-RO');
      return tenant;
    });
    console.log(typeof data.tenants);
    console.log($scope.g)

Angular 1.6：在范围函数执行之前不显示数据

2 个答案: