动态账单生成

Question

我已经生成了一个账单，账单中有很多项目，我必须隐藏收费 amt = 0 的项目，它应该在账单上打印收费amt > 0的项目

这是我的 html 文件

这是我的账单页面

1. 列表项

   <ion-title align="left">Bill</ion-title>   </ion-navbar>
   

   英语 德语 西班牙语 法语 马拉地语

   -->

   चारकोप (1)enter code here {{item.Society_Name}} -->

   -->

   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
   
     <div class="col">पावती क्रमांक :
       <b>{{this.name.bill_no}}</b>
     </div>
   </div>
   <div  style="display: grid;
   grid-template-columns: auto auto;">
       <div  style="  border: 1px solid rgba(0, 0, 0, 0.8);
       float:left;
       text-align: center;">Name :
       <b>{{this.name.bill_name}} </b></div>
       <div  style=" border: 1px solid rgba(0, 0, 0, 0.8);
       float:right;
       text-align: center;">Bill Date :
       <b>{{this.name.bill_period}}</b></div>
   
       <div  style="  border: 1px solid rgba(0, 0, 0, 0.8);
       float:left;
       text-align: center;">
           Bill For : <b>{{this.name.bill_period}}</b>
       </div>
       <div  style=" border: 1px solid rgba(0, 0, 0, 0.8);
       float:right;
       text-align: center;">
       Due Date : <b>{{this.name.bill_due}}</b>
       </div>
   
       <div  style="  border: 1px solid rgba(0, 0, 0, 0.8);
       float:left;
       text-align: center;">
          Wing :
          <b>{{this.name.wing}}</b>
       </div>
       <div  style=" border: 1px solid rgba(0, 0, 0, 0.8);
       float:right;
       text-align: center;">
          Floor No :  <b>2</b>
       </div>
   </div>
   <div  style="display: grid;
   grid-template-columns: auto auto auto;">
         <div class="col" style="background-color: rgb(255, 173, 22);
         color: white;  float: left; " >
           <b>Sr.</b>
         </div>
         <div class="col" style="background-color: rgb(255, 173, 22);
         color: white;  float: left;  " >
           <b>शुल्क विशेष</b>
         </div>
         <div class="col" style="background-color: rgb(255, 173, 22);
         color: white;  float: left; ">
           <b>रक्कम</b>
         </div>
   </div>
   <div  style="display: grid;
   grid-template-columns: auto auto auto;">
   
         <div class="col" style="background-color: rgb(228, 227, 227);" >
           <div class="row" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars; let i = index">{{i + 1}}</div>
         </div>
         <div class="col"  size="8" style="background-color: rgb(228, 227, 227); " >
   
         <div class="row"   style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">{{item.title}}</div>
         <!-- <ion-item *ngIf="this.products === charg_amt && charg_amt === 0"></ion-item> -->
         </div>
         <div class="col"  style="background-color: rgb(228, 227, 227); "  >
           <div class="row"   style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">{{item.charg_amt}}</div>
           <!-- <ion-item *ngIf="!this.item.charg_amt.deleted === false">{{name.charg_amt}} </ion-item> -->
           <!-- <div *ngIf="this.products === charg_amt">  -->
   
         </div>
   
   </div>
   <!-- <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
     <div class="col particularsList" style="background-color: rgb(228, 227, 227);" col-2>
       <div class="row particularsList" style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars; let i = index">{{i + 1}}</div>
     </div>
     <div class="col particularsList"  style="background-color: rgb(228, 227, 227);"  col-50>
       <div class="row particularsList"   style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">{{item.charge_title}}</div>
     </div>
     <div class="col particularsList"  style="background-color: rgb(228, 227, 227);"  col-3>
       <div class="row particularsList"   style="background-color: rgb(228, 227, 227);" *ngFor="let item of particulars">{{item. charge_amt}}</div>
     </div>
   </div> -->
   
   <div  style="display: grid;
   grid-template-columns: auto auto auto auto;
   grid-gap: 1px; border-bottom: solid black;
   border-width: 1px;">
     <div class="col" style="grid-column: 1 / span 2;">मागील तारख :- २१७०८</div>
     <div class="col" >
       <div class="row" style="grid-column: 2 ;">
         <div class="col">उप एकूण ₹</div>
   
         <div class="col">{{this.name.sub_Total}}</div>
       </div>
       <div class="row" style=" border-bottom: solid black;
       border-width: 1px;">
         <div class="col particularsList"  style="background-color: rgb(228, 227, 227);" >
           <b>एकूण देय रक्कम ₹</b>
         </div>
         <div class="col particularsList"  style="background-color: rgb(228, 227, 227);" >
           <b>{{this.name.grand_total}}</b>
         </div>
       </div>
     </div>
   </div>
   
   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
     <div class="col">
       <B>नियम:</B> 
         <P>1. प्रत्येक महिन्याच्या २० तारखेपर्यंत देखभाल खर्चाचा कर
         प्रदान करावा . कर प्रदान न केल्यास २१% दराने बाकी रक्कमेवर व्याज आकारला जाईल. </P>
       <P>2. प्रत्येक महिन्याच्या २० तारखेच्या आत देयकाची रक्कम प्रधान करावी.</P>
       <P>3. धनादेशाने रक्कम भरायची असल्यास धनादेश चारकोप  (१) 
         लि या नावाने.२० तारीखेयपूर्वी घ्यावा.</P> 
         <!-- <p *ngFor="let item of RuleData; let i = index">{{i+1}}.{{item.rule | translate }} </p>  -->
   
     </div>
   </div>
   
   <div class="row" style=" border-bottom: solid black;
   border-width: 1px;">
     <div class="col particularsList"   style="background-color: rgb(228, 227, 227);" align="right">
       `enter code here` (1) 
     </div>
   </div>
   
   <div class="row authSign"  style=" height: 100px;" >
     <div class="col" align="right">
       <b>अधिकृत सही</b>
     </div>
   </div>
   

   {{item.title}} ({{item.charg_amt}}) 贝尔贝滕 洛申 打印

Answer 1

试试这个

  <ion-item-sliding *ngIf="!item.deleted && item.charg_amt" #products>

我所做的更改是在您的 ngIf 中添加了一个条件 && item.charg_amt