角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.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.$apply()を追加し、その後、あなたのgスコープ変数にデータを割り当てるこの

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