Question

触发 onClick 后，我尝试返回某个函数中的数组。我在控制台中看到数组中包含的值。但我没有看到HTML页面上显示的值。

控制器：

$scope.chosenFilm = []; //The array where values are stored

  //onClick function
  $scope.insertFilm = function () {  
     console.log("Film saved in watch list!");
     getSelectedFilm(); //Call function
}

function getSelectedFilm() {
  return $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        return $scope.chosenFilm; 
      });
}

将显示值的HTML页面：

<div class="container">
        <table class="table">
          <thead>
            <tr>
              <th>Film</th>
              <th>Poster</th>
              <th>Overview</th>
              <th>Genres</th>
              <th>Release</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="film in chosenFilm">
              <td>{{film.title}}</td>
              <td><img ng-src="{{film.poster}}"></td>
              <td>{{film.overview}}</td>
              <td>{{film.genres}}</td>
              <td>{{film.release |  date:  "dd.MM.y" : UTC+00:00 }}</td>
            </tr>
          </tbody>
        </table>
</div>

Answer 1

此方法返回promise值，它是异步的。因为你必须使用带回调函数的htpp.get方法。

因此，对于您的代码，您可以使用

function getSelectedFilm() {
  $http.get('/watch-list').then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
        $scope.chosenFilm; 
      })
 .then (() => { 
console.log($scope.chosenFile);
......something else...; // you can see the  data 
});

Answer 2

调用HTTP GET的

getSelectedFilm()未执行

它位于insertFilm()里面，永远不会被称为

Answer 3

我建议使用as controller语法。原因是angular不能正确反映$ scope数组引用对视图的更改，因为它会为ng-repeat生成新的范围，即更改$ scope.chosenFilm ng-repeat的引用时那时会看旧的。有关详细信息： ng-repeat not updating on update of array。你的问题与那个问题非常相似，因为你在一段时间后（promise承诺解决时间）用response.data更改了selectedFilm引用。如果你不喜欢控制器作为语法，你可以快速使用这个：

angular.extend($scope.chosenFilm, response.data);

Answer 4

试试这个

$scope.chosenFilm = []; //The array where values are stored

 //onClick function
 $scope.insertFilm = function () {  
 console.log("Film saved in watch list!");
 $http.get('/watch-list')
 .then(function(response) {
      $scope.chosenFilm = response.data;     
      $log.info($scope.chosenFilm[0]); // Values displayed in console!
  });
}

从$ http GET服务返回函数值

4 个答案: