Question

HTML

   <div>
     <nav class="navbar">
       <a class="navbar-brand">Checkout-Reports</a>
     </nav>

     <div>
       <label>From </label>
       <input type="date" class="mx-3" />
       <label>To </label>
       <input class="mx-3" type="date" />
     </div>
   </div>

   <div id="table-scroll" class="table-scroll table-bordered">
     <div class="table-wrap" id="checkouts">
       <table class="main-table">
         <thead>
           <tr>
             <th class="fixed-side" scope="col">Name</th>
             <th scope="col">M-No</th>
             <th scope="col">Check-in Date</th>
             <th scope="col">Sharing Type</th>
             <th scope="col">Bed</th>
             <th scope="col">Advance</th>
             <th scope="col">Monthly Rent</th>
             <th scope="col">Checkouted Date</th>
           </tr>
         </thead>

         <tbody>
           <tr *ngFor="let checkout of pgCheckOutList">
             <th class="fixed-side">
               {{ checkout.firstName }} {{ checkout.lastName }}
             </th>
             <td>{{ checkout.mNumber }}</td>
             <td>{{ checkout.checkOutDate | date: "dd-MM-yyyy" }}</td>
             <td>4</td>
             <td>420</td>
             <td>{{ checkout.balAmt }}</td>
             <td>5000</td>
             <td>{{ checkout.roomNo }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>

TS !!

   @Component({
     selector: "app-checkout-list-report",
     templateUrl: "./checkout-list-report.component.html",
     styleUrls: ["./checkout-list-report.component.scss"]
   })
   export class CheckoutListReportComponent implements OnInit {
     pgCheckOutList: CheckOut[] = [];



     constructor(
       private tenantService: TenantService,
       private activatedRoute: ActivatedRoute,
       private router: Router,
       private checkOutService: CheckOutService
     ) {}

     ngOnInit() {
       this.checkOutService
         .getCheckOuts()
         .subscribe((checkouts: CheckOut[]) => {
           this.pgCheckOutList = checkouts;
         });
     }

CSS

.table-scroll {
  position: relative;
  margin: auto;
  overflow: hidden;
}
.table-wrap {
  width: 100%;
  overflow: auto;
}
.table-scroll table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  white-space: nowrap;
  vertical-align: top;
}

我需要按开始日期和结束日期过滤项目

我正在尝试通过Angular App的TypeScript中用户的起始/最新输入来过滤结帐列表的数据数组

我需要按开始日期和结束日期过滤项目我正在尝试通过Angular App的TypeScript中用户的从日期/日期输入过滤出结帐列表的数据数组

我需要按开始日期和结束日期过滤项目我正在尝试通过Angular App的TypeScript中用户的从日期/日期输入过滤出结帐清单的数据数组

Answer 1

您可以使用此ngx-filter-pipe。使用此npm，您可以指定要过滤的任何字段。

根据开始和结束日期过滤Angular 6项目

1 个答案: