可以使用 RxJS 的 Subject 对象来实现。在重置过滤器时,先在组件中创建一个 Subject 对象,然后将过滤器的状态保存在该对象中。当用户点击“应用”按钮时,再将该对象作为参数传递给服务端的查询函数,以执行过滤、分页和排序操作。
以下是一个示例代码:
import { Component } from '@angular/core';
import { DataService } from './data.service';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'app-root',
template: `
ID
Name
{{item.id}}
{{item.name}}
`
})
export class AppComponent {
private filtersChangedSubject = new Subject();
items = [];
nameFilter = '';
idFilter = '';
constructor(private dataService: DataService) {
this.filtersChangedSubject.pipe(
debounceTime(300),
distinctUntilChanged()
).subscribe(val => this.retrieveData(val));
}
resetFilters() {
this.nameFilter = '';
this.idFilter = '';
this.filtersChangedSubject.next({ nameFilter: this.nameFilter, idFilter: this.idFilter });
}
applyFilters() {
this.filtersChangedSubject.next({ nameFilter: this.nameFilter, idFilter: this.id