<分区>
<分区>
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;
}
我需要按开始日期和结束日期过滤元素
我正在尝试通过用户在 TypeScript 中为我的 Angular 应用程序输入的起始日期/截止日期来过滤结帐列表的数据数组
我需要按开始日期和结束日期过滤元素 我正在尝试通过用户在 TypeScript 中为我的 Angular 应用程序输入的起始日期/截止日期来过滤结帐列表的数据数组
我需要按开始日期和结束日期过滤元素 我正在尝试通过用户在 TypeScript 中为我的 Angular 应用输入的起始日期/截止日期来过滤结帐列表的数据数组
最佳答案
您可以使用这个 ngx-filter-pipe .使用此 npm，您可以指定要过滤的任何字段。
关于html - 根据开始和结束日期过滤 Angular 6 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59525860/