Question

我正在开发优惠券项目，我想向客户展示所有可购买的优惠券。当我点击调用函数“getAllCoupons（）”的按钮时，它可以工作并返回JSON中的结果，但是当我想用ng-repeat将结果插入到表中时，只有当函数返回超过一张优惠券，如果只有一张优惠券，则ng-repeat不会显示任何内容。

这是我的控制器

entryComponents

这是我的HTML

entryComponents: [CustomErrorComponent]

但是，如果我在没有ng-repeat的情况下编写它，它可以工作，我在JSON中得到它：

  angular.module('companyApp', []);
  angular.module('companyApp').controller('companyController',
  function($rootScope, $scope, $http) {

  $scope.getAllCoupons = function() {
                $http.get("rest/CompanyService/getAllCoupon").success(
                        function(response) {
                            $scope.allCoupons = response.coupon;
                        });

单张优惠券的回复是：

<div ng-app="companyApp" ng-controller="companyController">
<button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
<table align="center"  class="table table-striped" style="width: 900px;">
            <thead>
                <tr>
                    <th> Id </th>
                    <th>Coupon Title</th>
                    <th>Amount</th>
                      <th>Start Date</th>
                        <th>End Date</th>
                          <th>Price</th>
                           <th>Message</th>
                            <th>Coupon Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in allCoupons">
                    <td>{{ x.id }}</td>
                    <td>{{ x.title }}</td>
                     <td>{{ x.amount }}</td>
                      <td>{{ x.startDate }}</td>
                       <td>{{ x.endDate }}</td>
                        <td>{{ x.price }}</td>
                         <td>{{ x.message }}</td>
                          <td>{{ x.type }}</td>
                </tr>
            </tbody>
        </table>
    </div>

多张优惠券的回复是：

 <div ng-app="companyApp" ng-controller="companyController">
 <button class="tablinks" ng-click="getAllCoupons()" id="getAll">Get all coupons</button>
  {{ allCoupons }}
  </div>

感谢您的帮助：）

Answer 1

您正在引用一个对象而不是一个数组，请检查docs是否在ngRepeat的参数中使用了一个对象。

您需要ng-repeat="(key, value) in allCoupons

试试这个

<tr ng-repeat="(key, value) in allCoupons">
    <td>{{ value.id }}</td>
    <td>{{ value.title }}</td>
    <td>{{ value.amount }}</td>
    <td>{{ value.startDate }}</td>
    <td>{{ value.endDate }}</td>
    <td>{{ value.price }}</td>
    <td>{{ value.message }}</td>
    <td>{{ value.type }}</td>
</tr>

希望有所帮助

Answer 2

服务器对单张优惠券的响应格式与多张优惠券的格式不同。您应该与您的服务器人员交谈并要求他们解决此问题。无论是否存在单个优惠券或多个优惠券，优惠券属性都需要是一系列优惠券。如果没有优惠券，优惠券变量可以是未定义的，也可以是空数组。如果服务器人员为您进行此更改，您的UI代码应该按原样运行。

据我所知，有时，很难让服务器人员及时遵守您的请求，特别是如果他们在不同的团队中。如果是这种情况，您可以在UI代码上添加一个小补丁，以使UI使用现有服务，直到服务器人员提出修复。您必须更改下面的$http.get代码段（同时纳入@Claies建议的.success到.then更改）：

                $http.get('rest/CompanyService/getAllCoupon').then(
                    function(response) {
                        if(!response.coupon) {
                            // No Coupons
                            $scope.allCoupons = [];
                        } else if(response.coupon instanceof Array) {
                            // Multiple Coupons
                            $scope.allCoupons = response.coupon;
                        } else {
                            // Single Coupon
                            $scope.allCoupons = [response.coupon];
                        }
                    });

注意：此修复程序只是一个临时解决方案。最终必须修复服务器代码。服务器完全没有理由以不同的格式发送响应。

ng-repeat仅在DB返回多个结果时显示

2 个答案: