根据解析得到的数据在页面上显示数据

Question

我在解析服务器上有提供表和用户表。我对他提供的表格进行了查询，并且效果很好（控制台日志和 html - 我遇到了异步问题并且 Q.promise 有所帮助）。现在我正在尝试添加用户表中的两个元素。我在控制台上得到它，但不是在页面上。这是我在 offer.service 上的内容：

    this.getAllOffers = function () {

    var Q = $q.defer();
    console.log('getAllOffers called');

    //all offers filter is selected
    this.allOffersFilter = false;

    var offers = Parse.Object.extend("Offer");
    var exchanges = Parse.Object.extend("Exchanges");
    var users = Parse.Object.extend("User");

    var query = new Parse.Query(offers);
    var userQuery = new Parse.Query(users);

    var results = [];

    query.descending("createdAt");
    query.limit(4);

    userQuery.find().then(function(users) {
        for (i = 0; i < users.length; i++) {
            foundUsers = users[i];

            query.find().then( function(offers){
            for(i = 0; i < offers.length; i++){
                found = offers[i];
            var result = {};

            result.date = found.get("createdAt");
            result.price = found.get("price");
            result.status = found.get("accepted");
            result.lastName = foundUsers.get("lastName");
            result.companyName = foundUsers.get("companyName");

            console.log(result.companyName);
            console.log(result.price);
        }
    });
    results.push(result);
  }
  Q.resolve(results);
    });
  return Q.promise;
  };

然后是我的 HTML：

    <!--List of offers-->
    <div class="col-md-3">
        <h4>List of offers</h4>

        <div ng-if="offersList">
            <div ng-repeat="offer in offersList">
                <div class="offer card">
                    <div>{{offer.username}}</div>
                    <div>{{offer.companyName}}</div>
                    <div>{{offer.date}}</div>
                    <div>{{offer.price}}</div>
                    <div>{{offer.status}}</div>
                </div>
            </div>
        </div>
        <div ng-if="!(offersList)">There are no offers</div>
    </div>

然后是我的组件：

angular.module('offersPage')
.component('offersPage', {
    templateUrl: 'pages/offers-page/offers-page.template.html',
    controller: function(AuthService, PageService, OffersService, 
$scope) {
        // Functions for offers-page

        // Check if user is logged in and verified on page load
        AuthService.userLoggedin(function(loggedIn, verified) {
            if(!verified) {
                PageService.redirect('login');
            }
        });

        this.$onInit =  function() {
            OffersService.getAllOffers().then(function(offersList) {

            $scope.offersList = offersList;
            });
      }
    }
});

提前致谢！

Answer 1

您在填充results 之前解析$q，因此，您的列表为空。

我不知道Parse server，但如果userQuery.find().then 是async，那么需要将Q.resolve(results); 移到其中，或者可能移到query.find().then 中。

Answer 2

当您在 angularjs 中执行 ng-if 时，它实际上会取出元素，而当它放入时，它会作为子作用域。要解决此问题，您需要确保将$parent 放在ng-if 内的任何子元素上。见下文。确保在重复其良好做法时使用track by $index。另请注意，您不需要重复 $parent 任何内容，因为它引用了已定义的 offer。

代码：

<div ng-if="offersList">
            <div ng-repeat="offer in $parent.offersList track by $index">
                <div class="offer card">
                    <div>{{offer.username}}</div>
                    <div>{{offer.companyName}}</div>
                    <div>{{offer.date}}</div>
                    <div>{{offer.price}}</div>
                    <div>{{offer.status}}</div>
                </div>
            </div>
        </div>