从解析得到的数据中显示页面上的数据

Question

我在解析服务器上有报价 table 和用户 table。我查询了他提供的 table 并且效果很好（控制台日志和 html - 我遇到了异步问题并且 Q.promise 有所帮助）。现在，我正在尝试添加用户 table 中的两个元素。我在控制台上得到它，但在页面上没有。这是我在 offers.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

当您在 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>

Answer 2

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

我不知道 Parse server，但如果 userQuery.find().then 是 async，则需要将 Q.resolve(results); 移到其中，或者可能移到 [=16= 中].

从解析得到的数据中显示页面上的数据

Displaying data on the page from the data gotten from parse

javascript

arrays

angularjs

parse-platform

parse-server