如何解决如何在列上应用多个过滤器并在其上应用日期范围?
我正在尝试对列应用多个过滤器,但没有完成工作。我必须申请员工姓名、项目名称、开始日期和结束日期。下面是我的数据库表前端。帮我解决这个问题,我是角度材料的新手。期待帮助,并会感谢这个人。 在此示例中,我仅将逻辑应用于名称和项目,但出现错误。期待你们的友好回复
我的 html 文件看起来像。
<form [formGroup]="filterForm">
<div mat-dialog-content class="filter__form">
<mat-form-field>
<input matInput class="form-group" formControlName="name" />
<mat-placeholder>Employee Name </mat-placeholder>
</mat-form-field>
<mat-form-field>
<input matInput class="form-group" formControlName="project" />
<mat-placeholder>Project Name</mat-placeholder>
</mat-form-field>
<mat-form-field>
<mat-label>Start Date:</mat-label>
<input name="date_today" matInput [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error>Pick up the date</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>End Date:</mat-label>
<input name="date_today" matInput [matDatepicker]="picker2" />
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
<mat-error>Pick up the date</mat-error>
</mat-form-field>
<button
mat-raised-button
type="submit"
(click)="getFormsValue()"
mat-button
class="primary">
Apply Filters
</button>
</div>
</form>
<table
mat-table
matTableFilter
[dataSource]="dataSource"
class="mat-elevation-z8"
>
<!-- Position Column -->
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef><b>Employee Name:</b></th>
<td mat-cell *matCellDef="let element">
{{
element.first_name + " " + element.middle_name + " " + element.last_name
}}
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="hours">
<th mat-header-cell *matHeaderCellDef><b>Hours Worked:</b></th>
<td mat-cell *matCellDef="let element">{{ element.hours_worked }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="project">
<th mat-header-cell *matHeaderCellDef><b>Project Name:</b></th>
<td mat-cell *matCellDef="let element">{{ element.project_name }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="dated">
<th mat-header-cell *matHeaderCellDef><b>Date:</b></th>
<td mat-cell *matCellDef="let element">{{ element.date_today }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="summary" stickyEnd>
<th mat-header-cell *matHeaderCellDef><b>Summary:</b></th>
<td mat-cell *matCellDef="let element">{{ element.summary }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5,10,20]"></mat-paginator>
我的 TS 文件是。
export class ReportPageComponent implements OnInit {
userData: any = [];
dataSource: any = [];
employeeFilter = new FormControl();
projectFilter = new FormControl();
filteredValues = { employee: '',project: '' };
displayedColumns: string[] = ['name','hours','project','summary','dated'];
users: any = [];
filteredValue: any = [];
constructor(
private userdataService: UserdataService,public nav: NavbarService
) {}
@ViewChild(MatPaginator) paginator: MatPaginator | undefined;
ngOnInit(): void {
this.nav.show();
this.getTableRecord();
}
getTableRecord() {
this.userdataService.getReports().subscribe((data) => {
this.userData = data;
this.dataSource = new MatTableDataSource(this.userData.response);
this.dataSource.paginator = this.paginator;
});
}
// form group
filterForm = new FormGroup({
name: new FormControl(),project: new FormControl(),});
get project() {
return this.filterForm.get('project');
}
get name() {
return this.filterForm.get('name');
}
isArray = function (a: { constructor: ArrayConstructor }) {
return !!a && a.constructor === Array;
};
isObject = function (a: { constructor: ObjectConstructor }) {
return !!a && a.constructor === Object;
};
getFormsValue() {
const filterValues = {
project: this.project.value,name: this.name.value,};
this.dataSource.filterPredicate = (data,filter) => {
let displayData = true;
let myFilter = JSON.parse(filter);
for (var key in myFilter) {
if (myFilter[key]) {
if (typeof myFilter[key] === 'string') {
if (data[key] != myFilter[key]) {
displayData = false;
}
}
if (this.isArray(myFilter[key])) {
if (!myFilter[key].includes(data[key])) {
displayData = false;
}
}
}
}
return displayData;
};
this.dataSource.filter = JSON.stringify(filterValues);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。