Question

我有一个启动涡轮表组件。我需要在表格上应用多个过滤器。
我从父母那里打电话
myTable.doFilter(first_values); myTable.doFilter(second_values);一个接一个

在子组件（涡轮表格）上，实际过滤器的应用方式类似于
doFilter(...filter_values...){ this.pTable.filter(...filter_values...); } 问题在于第二个过滤器在第一个过滤器完成之前应用，并且导致意外结果。
前一个过滤器完成后，如何调用过滤器。过滤器完成后会发出一个事件，但是我找不到一种利用它的方法。

Parent.ts

 fetchList(searchData) {
        this.ratesTable.reset();
        this.ratesDataSource = [];
        this.programService.fetchList(searchData)
          .then(
            (response) => {

              this.ratesDataSource = response.rates;
              this.doTermFilter();
              this.doLoanFilter();
            })
          .catch((error) => {
            console.error("from ts" + error);
          });
      }
    doTermFilter(){
    this.doFilter({ filterValue: _termFilters, columnField: "COL1", filterMethod: "in" });
    }
doLoanFilter(){
    this.doFilter({ filterValue: _loanFilters, columnField: "COL7", filterMethod: "in" });
    }

child.ts（turbo-table）

 doFilter(doFilterInput: { filterValue: any[], columnField: any, filterMethod: any }) {
    this.pTable.filter(doFilterInput.filterValue, doFilterInput.columnField, doFilterInput.filterMethod);
    }

非常感谢您的帮助。谢谢

Answer 1

你可以使用异步/等待：

    fetchList(searchData) {
        this.ratesTable.reset();
        this.ratesDataSource = [];
        this.programService.fetchList(searchData)
          .then(
            (response) => {
    
              this.ratesDataSource = response.rates;
              await this.doTermFilter();
              await this.doLoanFilter();
            })
          .catch((error) => {
            console.error("from ts" + error);
          });
    }
    async doTermFilter(){
        this.doFilter({ filterValue: _termFilters, columnField: "COL1", filterMethod: "in" });
    }
    async doLoanFilter(){
        this.doFilter({ filterValue: _loanFilters, columnField: "COL7", filterMethod: "in" });
    }

Answer 2

这是过滤方法的源代码：

filter(value, field, matchMode) {
    if(this.filterTimeout) {
        clearTimeout(this.filterTimeout);
    }

    if (!this.isFilterBlank(value)) {
        this.filters[field] = { value: value, matchMode: matchMode };
    } else if (this.filters[field]) {
        delete this.filters[field];
    }

    this.filterTimeout = setTimeout(() => {
        this._filter();
        this.filterTimeout = null;
    }, this.filterDelay);
}

您可以看到它们正在使用超时，并且事件仅被发送一次，因为先前的超时被取消了，但是如果没有完整的示例，总体情况还不清楚。

链接：https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts

Answer 3

查看我对How to filter complex structured Json data in Angular 6的答案-我使用rxjs Observable模式来实现反应性/功能性/声明性解决方案，以过滤我认为与您的用例匹配的表...？（没有代码很难说）

Answer 4

我不知道表的事件系统如何工作，但总的来说，您将能够执行以下操作：

myTable.pTableReference.onFilterEvent(someData => myTable.doFilter(second_values));
myTable.doFilter(first_values);

您还可以尝试推广事件驱动型方法：

// child

doFilter(values): Promise<any> {
  return new Promise<any>((resolve, reject) =>
    this.pTable.onFilterEvent(resolve);
    try {
      this.pTable.filter(values);
    }
    catch(e) {
      reject(e);
    }
  )
}

// parent

myFilterFunction() {
  myTable.doFilter(first_values).then(result => myTable.doFilter(second_data));
}

// or using the `await` keyword
async myFilterFunction() {
  await myTable.doFilter(first_values);
  await myTable.doFilter(second_data);
}

或者走得更远，进入Observables。

正如我在一开始所说的，这完全取决于事件系统的工作方式以及如何为它们注册回调...

希望这会有所帮助：-）

Answer 5

有一种特殊的语法可用于Javascript中的异步功能，称为 async / await 。令人惊讶的易于理解和使用。就您而言：

async applyFilters() {
  await this.doTermFilter();
  this.doLoanFilter();
}

关键字await将使JavaScript等待doTermFilter()稳定下来，然后调用doLoanFilter()。

fetchList(searchData) {
...
this.ratesDataSource = response.rates;
this.applyFilters();

Async Function

Await

Answer 6

尝试使用此代码块：

filter(value, field, matchMode) {
    if(this.filterTimeout) {
        clearTimeout(this.filterTimeout);
    }

    if (!this.isFilterBlank(value)) {
        this.filters[field] = { value: value, matchMode: matchMode };
    } else if (this.filters[field]) {
        delete this.filters[field];
    }

    this.filterTimeout = setTimeout(() => {
        this._filter();
        this.filterTimeout = null;
    }, this.filterDelay);
}

Answer 7

您可以在子组件中创建一个事件发射器，并在过滤操作完成后将值发送给父组件。

父组件html：

<childComponent (filterEventEmitter)='handleFilterEvent($event)'></childComponent>

父组件 .ts 文件：

handleFilterEvent(data) {
   if(data.filterType === 'termFilter') {
       this.doLoanFilter();
   }
}
    
fetchList(searchData) {
   this.ratesTable.reset();
   this.ratesDataSource = [];
   this.programService.fetchList(searchData)
        .then(
              (response) => {
            
                  this.ratesDataSource = response.rates;
                  this.doTermFilter();
        })
        .catch((error) => {
             console.error("from ts" + error);
        });
}

子组件：

@Output filterEventEmitter : EventEmitter = new EventEmitter(null);
doFilter(args) {
    // filter operations
    filterEventEmitter.emit({filterType: 'TermFilter'});
}

前一个操作完成后在行中调用过滤器方法

7 个答案: