ng-repeat僅在DB返回多於一個結果時才顯示

我正在處理優惠券項目，並且我想向客戶顯示可供購買的所有優惠券。當我點擊調用函數「getAllCoupons（）」的按鈕時，它可以工作，並以JSON的形式返回結果，但是當我想用ng-將重複結果插入表格時，它只會在函數返回更多時顯示如果只有一張優惠券，則ng-repeat不會顯示任何內容。ng-repeat僅在DB返回多於一個結果時才顯示

這是我的控制器

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; 
         });

這是我的HTML

<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>

但如果我把它寫不NG-重複它的工作原理，我得到它在JSON：

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

單張優惠券的回覆爲：

{"coupon":{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}}

而對於多張優惠券的迴應是：

{"coupon":[{"amount":"60","endDate":"05/09/2020","id":"5","message":"warranty for 1 year","price":"200.99","startDate":"20/02/2014","title":"sunglasses","type":"FASHION"},{"amount":"149","endDate":"04/12/2020","id":"6","message":"only big sizes","price":"79.9","startDate":"07/08/2014","title":"pajamas","type":"FASHION"}]}

感謝您的幫助:)

來源

2017-05-26 S.Golbary

您可以用一張優惠券和另一張優惠券發佈樣品響應對象嗎？我猜測，當只有一張優惠券時，服務器會向您發送單一優惠券實例，而不是帶有單個優惠券元素的數組。 – CodeWarrior

在這兩種情況下，我都會獲得優惠券的詳細信息作爲回覆，但不會顯示給客戶，我根本沒有得到任何錯誤。@CodeWarrior –

你的UI代碼似乎沒問題。服務器響應的格式可能是罪魁禍首。這就是爲什麼我們需要查看單個優惠券和多個優惠券的服務器響應。 – CodeWarrior

你引用一個對象不是一個數組，檢查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>

希望它可以幫助

來源

2017-05-26 17:00:20

服務器的單個券反應是不同的格式，從什麼是對多張優惠券。你應該與你的服務器人談，並要求他們解決這個問題。無論是否有單個優惠券或多個優惠券，優惠券屬性都必須是優惠券數組。如果沒有優惠券，優惠券變量可以是未定義的或是空數組。如果服務器的人爲你做這個改變，你的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]; 
         } 
        });

注：此修復程序只是一個臨時的解決方案。服務器代碼必須最終修復。服務器以不同格式發送響應絕對沒有理由。

來源

2017-05-29 02:56:28 CodeWarrior

ng-repeat僅在DB返回多於一個結果時才顯示

回答

相關問題