Question

我正在检查official documentation of ng-bootstrap，在他们的一些官方示例中，代码无法正常工作。尤其是当您以Stackblitz方式打开this和this示例时，我在谈论它们。这使我很难理解代码的工作方式，从而可以按自己的方式实现它。

我见过this question，但答案已经过时了，因为与angularjs一样。

现在我的问题是：

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

一个有效的示例将非常有用，因为它将帮助我了解和理解代码的工作原理。谢谢。

Answer 1

我终于有了解决方案。我去their github来检查问题，然后去someone confirmed that indeed the stackblitz code has an issue了，但是给出了源代码和解决方法。

这里是{-{3}} 的ng-bootstrap 4表，具有排序，分页和过滤功能。

我基本上组织了代码，并添加了the working 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();
  }
}

另外，更改搜索方法以返回一个 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-bootstrap 4表排序，分页和过滤

2 个答案: