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

Posted 2023-03-11

【中文标题】AngularJS Ng-Repeat不在数组中显示数据

【英文标题】：AngularJS Ng-Repeat not displaying data in array

【发布时间】：2020-08-16 22:58:30

【问题描述】：

我正在构建一个函数，从 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"  class="cocktailImageSearchResult">
        </a>
    </div>

我做错了什么？

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

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

谢谢

【参考方案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);
      )