Question

当我进入主页时，单击导航栏中的链接

<li class="nav-item" ng-show="currentUser">
    <a class="nav-link" ng-show="currentUser" 
              ng-href="#/pictures"">Pictures</a>
</li>

它转到页面，我可以看到数据已下载，但是更新$scope.urlListUI时UI中未显示该数据。

 urlListInRoomUnits=loadPicture(filePathInRoomUnitPicture);
 $scope.urlListUI=urlListInRoomUnits;
 $scope.$apply();
 console.log('update ui: '+urlListInRoomUnits);

但是，如果刷新页面，它将起作用。

UI代码

 <div ng-repeat = "urlRecord in urlListUI">
    <p>{{urlRecord[1]}}</p>
    <img ngf-src="urlRecord[0]" class="img-thumbnail">
 </div>

函数：loadPicture（filePathInRoomUnitPicture）

        function loadPicture(pictureTypeFolder){
          console.log('loadpicture is running, input parameter:'+pictureTypeFolder);
          var urlList=[];
          $scope.whereThePictureIs=pictureTypeFolder;
          //list image from firebase storage
          var storageRefDownloadByPictureType = storageRef.child('airconPicture').child(pictureTypeFolder);
          storageRefDownloadByPictureType.listAll()
          .then(function(result) {
                console.dir(result);
                result.items.forEach(function(imageRef) {
                  // And finally display them
                  imageRef.getDownloadURL()
                  .then(function(url){
                    // TODO: Display the image on the UI
                    urlList.push([url,imageRef.name]);
                    })
                    .catch(function(error) {
                      // Handle any errors
                      });
                    });// end of for each download

                })// end of list all promise
          .catch(function(error) {
            // Handle any errors
          });
          return urlList;
        };// end of load Pciture by type

感谢您的帮助或将我定向到正确的消息来源。

Answer 1

所以我看到的是，首先，您尝试解决storageRefDownloadByPictureType.listAll()

解决后（例如1秒钟），您循环运行结果并尝试解析项目列表：

result.items.forEach(function(imageRef) {
  imageRef.getDownloadURL().then(function(url){

})

您一次解决了所有问题，比如说再花1秒钟。

您的方法不会返回Promise，而是空urlList，因为您将在接下来的2秒钟内填充它。

因此，urlListInRoomUnits=loadPicture(filePathInRoomUnitPicture);

应该是这样的（您可以在某些服务中写loadPicture，让我们说MyService）：

MyService.loadPicture(filePathInRoomUnitPicture).then(function (urls) {

  //here you get all your results
  $scope.urlListUI = //...  
});

和现在的loadPicture in MyService：

this.loadPicture = function(filePathInRoomUnitPicture){

  //... 

  return storageRefDownloadByPictureType.listAll().then(function(result) {
     // create list of promises:

     var promises = [];

     result.items.forEach(function(imageRef) {                  
         promises.push(imageRef.getDownloadURL());
      })

      // chain promises
      return $q.all(promises);
    };

路由重定向后未加载页面上的angulajs数据

1 个答案: