角度1.6：數據沒有顯示，直到示波器功能執行

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)