从$ http GET服务返回函数值

I am trying to return an array from a function once onClick is triggered. I see the values contained in the array in the console. But I don't see the values displayed on the HTML page.

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

The Controller:

控制者：

$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 Page where values would be displayed:

将显示值的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>

4 个解决方案

#1

This method returns promise value and it is asynchronous. Because of the you have to use htpp.get methods with callback functions.

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

As a result, with respect to your code you can use as

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

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 
});

#2

getSelectedFilm() that calls the HTTP GET is not executed

不执行调用HTTP GET的getSelectedFilm（）

It is inside insertFilm() that is never called

它位于insertFilm（）内部，从不被调用

#3

try this

尝试这个

$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!
  });
}

#4

I recommend to use as controller syntax.The reason is angular does not reflect $scope array reference changes to the view properly because it generates new scope for ng-repeat i.e when you change the reference of $scope.chosenFilm ng-repeat will watch the old one at that time. For more detail : ng-repeat not updating on update of array. Your problem is excatly same as that one because you change chosenFilm reference after some time (promise resolving time) with response.data. If you dont like controller as syntax you can quickly use this one :

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

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

#1