Angular从json api返回空白response.data

时间:2018-06-13 14:23:02

标签: javascript angularjs promise

ng-repeat返回空白,我是Angular的新手。我检查了错误,但没有找到。我真的不知道这里有什么问题。

  <table>
    <thead>
      <tr>
       <th>Name</th>
       <th>Stars</th>
       <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos">
        <td>{{repo.name}}</td>
        <td>{{repo.stargazers_count }}</td>
        <td>{{repo.language}}</td>
      </tr>
    </tbody>
  </table>

下面是HTML,我想在GitHub上显示特定用户的存储库:

;WITH CTE AS
(
    SELECT  1234  AS UserId , 1001  AS AccountId   , 'Mr' AS Title ,'John' AS FirstName      ,'Banks' AS     LastName   
UNION ALL
    SELECT  1235   ,1001      , 'Mrs'   , 'Georgia'   , 'Banks'    
UNION ALL           
    SELECT  1236   , 1002      , 'Mr'    , 'Chris'     , 'Aims'
UNION ALL 
    SELECT  1237   , 1002      , 'Mrs'   , 'Caroline'  , 'Hole'
)
,CTE1 AS
(
    SELECT UserId,AccountId,Title,FirstName,LastName, Title+SPACE(2)+LEFT(FirstName,1)+SPACE(2)+LastName AS FullName
    FROM CTE
)
,CTE2 AS
(   
    SELECT DISTINCT AccountId,(SELECT ','+FullName FROM CTE1 CC WHERE C.AccountId=CC.AccountId FOR XML PATH('')) AS CombName
    FROM CTE1 C
)
    SELECT 'Account '+ CAST(AccountId AS VARCHAR(10))+' : ' + CHAR(13)+REPLACE(SUBSTRING(CombName,2,LEN(CombName)),',',' & ') AS TotalColumn
    FROM CTE2

2 个答案:

答案 0 :(得分:0)

尝试打电话   $ http.get($ scope.user.repos)     .then(onRepos,onReposError);在onUserComplete函数里面。 Angular http模块方法是异步的。因此,在进行get或post调用之后,angular会忘记它并继续执行。

答案 1 :(得分:0)

问题是您正在进行的HTTP调用是异步的,因此当您执行第二个调用时,您还没有用户。你必须连接承诺。如果您不打算在任何地方使用该用户,仅用于第二次通话,那么您可以简化代码:

$http.get("https://api.github.com/users/" + username)
     .then(function(response) {
         return $http.get(response.data.repos_url);
     })
     .then(function(response) {
         $scope.repos = reponse.data;
     }, 
     onError);

当第一个 get 成功时执行第一个然后,所以我调用第二个 get 。然后在第二次HTTP调用成功时执行第二个然后。这样我们就连接了两个承诺。

我在JSFiddle写了一个完整的例子。

但是我已经在这里复制了完整的代码,因此它可能对其他人有用:

AngularJS

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$http', function ($http) {
    var $ctrl = this;
    $ctrl.username = null;
    $ctrl.repos = null;


    $ctrl.getRepositoryData = function () {   
        $ctrl.repos = null;
        $http.get('https://api.github.com/users/' + $ctrl.username)
             .then(function(response) {
                 return $http.get(response.data.repos_url);
             })
             .then(function(response) {
                 $ctrl.repos = response.data;
             }, 
             function (error) {
                 console.log('Error happened:', error);
             });
    };
}]);

<强> HTML

<div ng-app="myModule">
    <div ng-controller="myController as ctrl">
        <div>
            <input type="text" ng-model="ctrl.username"/>
            <button type="button" ng-click="ctrl.getRepositoryData()">
                Get Repos
            </button>
            <p>User repositories: {{ctrl.repos}}</p>
        </div>
   </div>
</div>