AngularJS Ng-Repeat不在数组中显示数据

Question

我正在构建一个函数，从 mongodb 集合中获取文档，然后将该数据存储在一个数组中，并使用该数组的内容在视图上显示元素。

问题是，虽然我可以看到我收到了相关数据的响应，但视图上没有显示任何内容。

server.js 函数...

app.get('/user/getFavourites', function (req, res) {

    User.find({ username: req.session.passport.user }, 'favourites', function (err, docs) {
        if (err) {
            res.status(400).send("Couldn't get favourites")
        } else {
            res.status(200).send(docs);
        }
    })
        .lean();
})

dataService 函数，用于从返回的 db 文档中获取收藏夹并将其存储在收藏夹数组客户端中。

angular.module('dataService', [])

  .factory('dataService', function ($http) {

    let selectedCocktailData = [];
    let cocktailIngredients = [];
    let toggleFavourite = false;
    let favourites = [];

    return ({

      selectedCocktailData: selectedCocktailData,

      cocktailIngredients: cocktailIngredients,

      toggleFavourite: toggleFavourite,

      favourites: favourites,

      addFavourite: function (cocktailName, cocktailImage) {

        $http.post('/user/addFavourite',
          { cocktailName: cocktailName, cocktailImage: cocktailImage })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (response) {
            console.log(response)
          })
      },

      getFavourites: function () {
        $http.get('/user/getFavourites')

          .then(function (response) {
            favourites = [...response.data[0].favourites];
            console.log(favourites);
          })

          .catch(function (response) {
            console.log(response);
          })
      }

    })


  })

从控制台记录收藏夹变量，我可以看到它是否正确更新了来自对获取请求的响应的所有相关数据。

然后在我的收藏夹控制器中我有这个...

  dataService.getFavourites();

   $scope.favouritesCollection = [...dataService.favourites];

   console.log($scope.favouritesCollection);

favouritesCollection 保持为空，并且没有从服务中获取数据。

最后是我的观点...

    <div class="col-sm-5 col-lg-2 cocktailResultsContainer" ng-repeat="favourite in favouritesCollection">
        <a href="#!CocktailDetails" ng-click="selectedCocktail($index)">
            <h3 class="text-center cocktailHeader"><strong>{{favourite.cocktailName}}</strong></h3>
            <img ng-src="{{favourite.cocktailImage}}" alt="Cocktail image" class="cocktailImageSearchResult">
        </a>
    </div>

我做错了什么？

我是否应该直接从服务调用收藏夹变量，以便在视图 dataService.favourites 中？而不是将其分配给收藏夹控制器中的变量？

为什么收藏夹控制器中的 favouritesCollection 变量没有成为服务中收藏夹变量的克隆？

谢谢

Answer 1

你的工厂方法需要一个返回语句。

 getFavourites: function () {
        return $http.get('/user/getFavourites')

      .then(function (response) {
        favourites = [...response.data[0].favourites];
         return favourites;
        console.log(favourites);
      })

      .catch(function (response) {
        console.log(response);
      })
  }