如何实现ng-bootstrap4table排序、分页和过滤

Question

我正在查看 official documentation of ng-bootstrap, in some of their official examples, the code is not working. In particular I am talking about this and this 示例，当您在 stackblitz 中打开它们时。这让我很难理解代码是如何工作的，因此我无法按照自己的方式实现它。

我看过 this question 但答案已经过时，因为它是 angularjs。

所以现在我的问题是：

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

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

Answer 1

我终于有办法了。我去了 their github to check the issues and someone confirmed that indeed the stackblitz code has an issue 但提供了源代码和解决方法。

这是一个 ng-bootstrap4table 的 the working code，具有排序、分页和过滤功能。

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

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

Answer 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();
  }
}

此外，将搜索方法更改为 return 你是一个 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);
  }));
}

这应该有效。

如何实现ng-bootstrap4table排序、分页和过滤

How to implement ng-bootstrap 4 table sorting, pagination and filtering

datatables

ng-bootstrap

angular