问题描述
我对Angular不太熟悉,一直在尝试为Mat Table的createDate列创建一个日期范围过滤器。当我点击过滤器按钮时,它只是填充了一个空白表。过滤器的代码在构造函数和datFil()中。我尝试了几种不同的方法,但无济于事。任何帮助将不胜感激!
TypeScipt
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatSort} from '@angular/material/sort';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { MatDialog,MatDialogConfig } from '@angular/material';
import { DialogDataComponent } from "../dialog-data/dialog-data.component";
import { DatePipe } from '@angular/common';
import {FormControl,FormGroup} from '@angular/forms';
export interface User {
id: number;
name: string;
distributor: string;
storeNum: number;
poNum: number;
createDate: Date;
recDate: Date;
totalUnits: number;
}
@Component({
selector: 'app-order-table',templateUrl: './order-table.component.html',styleUrls: ['./order-table.component.scss']
})
export class OrderTableComponent implements OnInit{
[x: string]: any;
public users: User[];
public begin: string;
public end: string;
private usersUrl = 'api/users';
// public doFilter = (value: string) => {
// console.log("testing: " + value);
// this.dataSource.filter = value.trim().toLocaleLowerCase();
// }
displayedColumns: string[] = ['name','distributor','storeNum','poNum','createDate','recDate','totalUnits'];
pipe: DatePipe;
dataSource = new MatTableDataSource<User>(this.users);
@ViewChild(MatPaginator,{static: false}) paginator: MatPaginator;
@ViewChild(MatSort,{static: true}) sort: MatSort;
storeFilter = new FormControl();
poFilter = new FormControl();
nameFilter = new FormControl();
datefilter = new FormControl();
filteredValues = {
name: '',distributor: '',storeNum: '',poNum: '',createDate: '',recDate: '',totalUnits: ''
};
constructor(private http: HttpClient,public dialog: MatDialog) {
this.dataSource.filterPredicate = (data,filter) =>{
if (this.begin && this.end) {
return data.createDate >= this.fromDate && data.createDate <= this.toDate;
}
return true;
}
};
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnInit() {
this.pipe = new DatePipe('en');
this.getUsers().subscribe(data => this.dataSource.data = data)
this.dataSource.paginator = this.paginator;
this.storeFilter.valueChanges.subscribe((storeFilterValue) => {
this.filteredValues['storeNum'] = storeFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.poFilter.valueChanges.subscribe((poFilterValue) => {
this.filteredValues['poNum'] = poFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.nameFilter.valueChanges.subscribe((nameFilterValue) => {
this.filteredValues['name'] = nameFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});
this.dataSource.filterPredicate = this.customFilterPredicate();
console.log(this.dataSource);
}
dateFil(filter) {
console.log(this.begin);
console.log(this.end);
this.dataSource.filter = ''+Math.random();
}
HTML
<div>
<input matInput class="daterange" (keypress)="keyPressNumbersDate($event)" [formControl]= "datefilter" [(ngModel)]= "begin" placeholder="mm/dd/yyyy"> - <input matInput class="daterange" (keypress)="keyPressNumbersDate($event)" [(ngModel)]= "end" placeholder="mm/dd/yyyy">
<button (click)= 'dateFil()'>Filter</button>
</div>
解决方法
您可以这样过滤数据源。
dateFil() {
dataSource = new MatTableDataSource<User>(this.users.filter(x=>x.createDate>=this.begin && x.createDate<=this.end));
}
我已经创建了一个演示,您可以找到here