我需要添加日期范围的过滤器。意思是我只需要显示用户从日期到现在输入的数据。我有一组数据，其中只显示一个日期。但我想过滤它，就像这个用户输入任意 2 个日期(从和到)并且在数组中我只显示输入日期之间的数据。
<div class="row">
<div class="col-12">
<div class="content-header">Claims Status</div>
<p class="content-sub-header">Claims Settled 23</p>
</div>
</div>
<section id="extended">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="row" >
<div class="col-sm bg-primary text-white" style="text-align: center;" ><div>Claims<br>(settled)</div><div *ngIf="statusunsettledcc"> {{statusunsettledcc}}</div></div>
<div class="col-sm bg-success text-white" style="text-align: center;"><div>Claim Amount<br>(settled)</div><div *ngIf="statusunsettledamount">{{statusunsettledamount | number : fractionSize}}</div></div>
<div class="col-sm bg-danger text-white" style="text-align: center;" ><div>Claims<br>(unsettled)</div><div *ngIf="status2settledcc">{{status2settledcc}}</div></div>
<div class="col-sm bg-warning text-white" style="text-align: center;"><div>Claim Amount<br>(unsettled)</div><div *ngIf="status2settledamount">{{status2settledamount | number : fractionSize}}</div></div>
</div>
<div class="card-header">
<div class="card-title-wrap bar-success">
<h4 class="card-title">Claims</h4>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-md-3">
<div class="form-group" >
<label for="">Search Name</label>
<input type="text" class="form-control" [(ngModel)]="userFilter.member_name" placeholder="Search name" name="search">
</div>
</div>
<div class="col-md-3">
<div class="form-group" >
<label for="">Search Claim No</label>
<input type="search"
class="form-control" placeholder="Claim No" [(ngModel)]="userFilter.claim_no">
</div>
</div>
<div class="col-md-3 form-group">
<input type="date" class="form-control" [(ngModel)]="from"> //From date
</div>
<div class="col-md-3 form-group">
<input type="date" class="form-control" [(ngModel)]="to"> //To Date
</div>
<div class="col-md-3" *ngIf="company">
<div class="form-group">
<label for="">Company</label>
<select class="form-control" [(ngModel)]="userFilter.company_id" (change)="getClaims()">
<option value='' >All</option>
<option value="999">Airlink Communication</option>
<option value="637">Ascertia (Pvt) Ltd</option>
<option value="1053">Frontier Works Organization</option>
<option value="1174">Ebryx (pvt) Ltd</option>
<option value="274">HY Enterprises (Pvt) Limited</option>
<option value="459">Naimat Saleem trust NST (US GROUP)</option>
<option value="659">Samad Rubber Works (Pvt) Ltd</option>
<option value="56">Sundry Clients</option>
<option value="620">TIMEXPERTS (PRIVATE) Limited</option>
<option value="39">US Apparel & Textile (Pvt) Limited</option>
<option value="40">US Denim Mills (Pvt) Limited</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Claim Status</label>
<select class="form-control" [(ngModel)]="userFilter.status">
<option value='' >All</option>
<option value="submitted">Submitted</option>
<option value="approved">Approved</option>
<option value="cancel">Objection Claim</option>
<option value="settled">Settled</option>
<option value="rejected">Rejected</option>
<option value="CLOSED">Closed</option>
<option value="OUTSTANDING">Outstanding</option>
</select>
</div>
</div>
<div class="col-md-3" *ngIf="policyclaim">
<div class="form-group">
<label for="">Policy</label>
<select class="form-control" [(ngModel)]="userFilter.policy_id" (change)="getClaims()" style="width: 400px" >
<option value='' >Select Policy No</option>
<option *ngFor="let policy of policynumbers" value="{{policy.policy_id}}">{{policy.policy_id}}</option>
</select>
</div>
</div>
<div class="col-md-3" *ngIf="policysamad">
<div class="form-group">
<label for="">Policy</label>
<select class="form-control" [(ngModel)]="userFilter.policy_id" (change)="getSamad()" style="width: 400px" >
<option value='' >Select Policy No</option>
<option *ngFor="let policy of policynumbers" value="{{policy.policy_id}}">{{policy.policy_id}}</option>
</select>
</div>
</div>
</div>
<table class="table table-responsive-md text-center">
<thead>
<tr>
<th>STATUS</th>
<th>Name</th>
<th>Patient Name</th>
<th>Approved Amount</th>
<th>Claimed Amount</th>
<th>Company</th>
<th>Submitted By</th>
<th>Claim No</th>
<!-- <th>Website URL</th> -->
</tr>
</thead>
<tbody *ngIf="data1">
<tr *ngFor="let x of data1 | filterBy: userFilter" (click)="openDeal(deletecontent, x)" >
<td>
<span class="text-success" *ngIf="x.status == 'submitted'">Submitted</span>
<span class="text-primary" *ngIf="x.status == 'settled'">Settled</span>
<span class="text-warning" *ngIf="x.status == 'rejected'">Rejected</span>
<span class="text-danger" *ngIf="x.status == 'Approved'">Approved</span>
<span class="text-danger" *ngIf="x.status == 'ojection claim'">Objection claim</span>
</td>
<td >
<div style="text-align: left;">
<img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
{{x.member_name}}
</div>
</td>
<td style="text-align: left;">{{x.patient_name}}</td>
<td>{{x.approved_value}}</td>
<td>{{x.claimed_value}}</td>
<td>
<span class="text-success" *ngIf="x.company_id == '999'" >Airlink Communication</span>
<span class="text-success" *ngIf="x.company_id == '637'">Ascertia (Pvt) Ltd</span>
<span *ngIf="x.company_id == '1053'" class="text-success">Frontier Works Organization</span>
<span *ngIf="x.company_id == '1174'" class="text-success">Ebryx (pvt) Ltd</span>
<span *ngIf="x.company_id == '274'" class="text-success">HY Enterprises (Pvt) Limited</span>
<span *ngIf="x.company_id == '459'" class="text-success">Naimat Saleem trust NST (US GROUP)</span>
<span *ngIf="x.company_id == '659'" class="text-success">Samad Rubber Works (Pvt) Ltd</span>
<span *ngIf="x.company_id == '56'" class="text-success">Sundry Clients</span>
<span *ngIf="x.company_id == '620'" class="text-success">TIMEXPERTS (PRIVATE) Limited</span>
<span *ngIf="x.company_id == '39'" class="text-success">US Apparel & Textile (Pvt) Limited</span>
<span *ngIf="x.company_id == '40'" class="text-success">US Denim Mills (Pvt) Limited</span>
</td>
<td>{{x.submitted_at || 'not-defined'}}
</td>
<td>{{x.claim_no}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
.ts
getClaims(){
this.policyclaim = true;
if(this.userFilter.company_id){
this.url = 'url='+this.userFilter.company_id;
this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(statuses => {
console.log(statuses);
console.log(statuses.records[0].Amount);
this.statusunsettledamount = statuses.records[0].Amount;
console.log(this.statusunsettledamount);
console.log(statuses.records[0].cc);
this.statusunsettledcc = statuses.records[0].cc;
});
this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(statuses2 => {
console.log(statuses2);
console.log(statuses2.records[0].Amount);
this.status2settledamount = statuses2.records[0].Amount;
console.log(this.status2settledamount);
console.log(statuses2.records[0].cc);
this.status2settledcc = statuses2.records[0].cc;
console.log(this.status2settledcc);
});
this.httpClient.get<any>('url'+this.userFilter.company_id).subscribe(policyinfo => {
console.log(policyinfo);
this.policynumbers = policyinfo.records;
console.log(this.policynumbers);
});
}
if (this.from && this.to) {
const fromDate = new Date(this.from.split(/\D/));
const toDate = new Date(this.to.split(/\D/));
this.data1.filter(obj => new Date(obj.date) > fromDate && new Date(obj.date) < toDate);
console.log(this.data1);
}
else
{
this.url = 'url/get_claims.php?offset=0&limit=50';
this.httpClient.get<any>('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims_amt.php?cstatus=OUTSTANDING').subscribe(statuses => {
console.log(statuses);
console.log(statuses.records[0].Amount);
this.statusunsettledamount = statuses.records[0].Amount;
console.log(this.statusunsettledamount);
console.log(statuses.records[0].cc);
this.statusunsettledcc = statuses.records[0].cc;
});
this.httpClient.get<any>('url/get_claims_amt.php?cstatus=CLOSED').subscribe(statuses2 => {
console.log(statuses2);
console.log(statuses2.records[0].Amount);
this.status2settledamount = statuses2.records[0].Amount;
console.log(this.status2settledamount);
console.log(statuses2.records[0].cc);
this.status2settledcc = statuses2.records[0].cc;
console.log(this.status2settledcc);
});
this.httpClient.get<any>('url/insurance-api/get_company_policy.php?').subscribe(policyinfo => {
console.log(policyinfo);
this.policynumbers = policyinfo.records;
console.log(this.policynumbers);
});
}
this.clientData = this.httpClient.get<any>(this.url).
subscribe(data => {
console.log(data);
this.spinner.hide();
this.data1 = data.records;
this.data1.forEach(d => this.policy_id.add(d.policy_id));
console.log(this.userFilter.policy_id);
if(this.userFilter.policy_id){
let vv = this.data1.filter(v => v.policy_id === this.userFilter.policy_id);
console.log(vv);
this.httpClient.get<any>('http://url='+this.userFilter.policy_id).subscribe(statuses => {
console.log(statuses);
console.log(statuses.records[0].Amount);
this.statusunsettledamount = statuses.records[0].Amount;
console.log(this.statusunsettledamount);
console.log(statuses.records[0].cc);
this.statusunsettledcc = statuses.records[0].cc;
});
this.httpClient.get<any>('url='+this.userFilter.policy_id).subscribe(statuses2 => {
console.log(statuses2);
console.log(statuses2.records[0].Amount);
this.status2settledamount = statuses2.records[0].Amount;
console.log(this.status2settledamount);
console.log(statuses2.records[0].cc);
this.status2settledcc = statuses2.records[0].cc;
console.log(this.status2settledcc);
});
this.httpClient.get<any>('http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_company_policy.php?company_id='+this.company_id).subscribe(policyinfo => {
console.log(policyinfo);
this.policynumbers = policyinfo.records;
console.log(this.policynumbers);
});
this.url = 'url/get_claims.php?';
this.clientData = this.httpClient.get<any>(this.url,
{
params: {
policy_id: this.userFilter.policy_id
},
}).
subscribe(data => {
console.log(data);
this.spinner.hide();
this.data1 = data.records;
this.data1.forEach(d => this.policy_id.add(d.policy_id));
console.log(this.userFilter.policy_id);
});
//const sum1 = vv.filter(item => item.status === 'settled')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum1);
//this.sum1 = sum1;
//const sum2 = vv.filter(item => item.status === 'submitted')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum2);
//this.sum2 = sum2;
//var status = 'settled';
//var status2 = 'submitted';
//var countsettled = vv.filter((obj) => obj.status === status).length;
//var countunsettled = vv.filter((obj) => obj.status === status2).length;
//console.log(countsettled);
//this.countsettled = countsettled;
//console.log(countunsettled);
//this.countunsettled = countunsettled;
}
//else{
//const sum1 = this.data1.filter(item => item.status === 'settled')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum1);
//this.sum1 = sum1;
//const sum2 = this.data1.filter(item => item.status === 'submitted')
//.reduce((acc, item) => acc + Number(item.approved_value), 0);
//console.log(sum2);
//this.sum2 = sum2;
//var status = 'settled';
//var status2 = 'submitted';
//var countsettled = this.data1.filter((obj) => obj.status === status).length;
//var countunsettled = this.data1.filter((obj) => obj.status === status2).length;
//console.log(countsettled);
//this.countsettled = countsettled;
//console.log(countunsettled);
//this.countunsettled = countunsettled;
//}
});
}
最佳答案
根据用户日期过滤数组。更喜欢输入中的任何日期选择器来选择日期对象并避免额外的开销。我更喜欢 moment 进行日期比较和过滤。如需更快的数据过滤，请参阅交叉过滤器。无论数组长度如何，它都比正常过滤快得多。
关于javascript - 按 2 个日期进行 Angular 过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56372090/