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

Question

I am going through the 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 examples, when you open them in stackblitz. This makes it hard for me to understand how the code works so that I can implement it my way.

I have seen this question but the answer is outdated as it is for angularjs.

So now my questions is:

1. How can I implement ng-bootstrap 4 table sorting, pagination and filtering as shown here ? What is the issue with the given code why is it not working?

A working example would be great as it would help me see and understand how the code works. Thank you.

Answer 1

I finally have a solution. I went to their github to check the issues and someone confirmed that indeed the stackblitz code has an issue but gave the source code and a work-around.

Here is the working code of an ng-bootstrap 4 table with sorting, pagination and filtering.

I basically organised the code and added a few things that were omitted in the original stackblitz code .

Among the issues that were there, was that the directive wasn't declared in the declarations' array in AppModule.

Answer 2

I came across the search feature and solved it like below: Search and filering solution (Not working part):

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

The valueChanges would emit to a subscription, so if you change the code like below to subscribe to the changes:

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

Also, change the search method to return you a Observable instead of the array like below:

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

this should work.