如何实现 ng-bootstrap 4 表格排序、分页和过滤答案

【问题标题】：How to implement ng-bootstrap 4 table sorting, pagination and filtering如何实现 ng-bootstrap 4 表格排序、分页和过滤
【发布时间】：2019-07-09 01:32:08
【问题描述】：

我正在浏览official documentation of ng-bootstrap，在他们的一些官方示例中，代码不起作用。特别是当您在 stackblitz 中打开它们时，我正在谈论 this 和 this 示例。这让我很难理解代码是如何工作的，以便我可以按照自己的方式实现它。

我见过this question，但答案已经过时了，因为它是针对 angularjs 的。

所以现在我的问题是：

如何实现 ng-bootstrap 4 表格排序、分页和过滤，如here 所示？给定代码有什么问题，为什么它不起作用？

一个工作示例会很棒，因为它可以帮助我了解和理解代码的工作原理。谢谢。

【问题讨论】：

@AkberIqbal 如果您转到链接，您将看到 stackblitz 代码。我的问题是给定的代码不能正常工作，但我已经解决了。干杯

标签： angular datatables ng-bootstrap

【解决方案1】：

我终于有办法了。我去了their github 检查问题和someone confirmed that indeed the stackblitz code has an issue，但提供了源代码和解决方法。

这是带有排序、分页和过滤功能的 ng-bootstrap 4 表的the working code。

我基本上整理了代码并添加了original stackblitz code中省略的一些内容。

存在的问题之一是该指令未在 AppModule 的声明数组中声明。

【讨论】：

你知道如何添加列 lvl 下拉过滤器吗？

【解决方案2】：

我遇到了搜索功能并解决了如下问题：搜索和归档解决方案（非工作部分）：

 constructor(pipe: DecimalPipe) {
    this.countries$ = this.filter.valueChanges.pipe(
      startWith(''),
      map(text => search(text, pipe))
    );
  }
}

valueChanges 将发送到订阅，因此如果您更改如下代码以订阅更改：

constructor(pipe: DecimalPipe) {
    this.filter.valueChanges.pipe(
      startWith(''),
      map(text => {
         this.countries$ = search(text, pipe))
      }
    ).subscribe();
  }
}

另外，更改搜索方法以返回 Observable，而不是如下所示的数组：

search(text: string, pipe: PipeTransform): Observable<Country[]> {
  return Observable.of(COUNTRIES.filter(country => {
    const term = text.toLowerCase();
    return country.name.toLowerCase().includes(term)
        || pipe.transform(country.area).includes(term)
        || pipe.transform(country.population).includes(term);
  }));
}

这应该可以。

【讨论】：