如何用API调用返回的数据填充Angular Boostrap Table Widget ?

Question

我正在尝试进行API调用，并使用我接收到的数据在Bootstrap Angular Table Widget中使用。

我正在使用的小部件:完整的示例(Angular驱动的bootstrap小部件)

确保您使用的是完整的示例，包含服务和分页等。

我试着替换这个。有我的API调用响应的国家/地区

constructor(public service: CountryService) {
this.countries$ = service.countries$;
this.total$ = service.total$;
this.headers = new QueryList<NgbdSortableHeader>();
}

Api服务:

getusers2() {
return this.http.get<Country[]>(this.getusersEndpoint, this.httpOptions);
}

这部分有效，因为我在表中获得了预期的输出，但是服务仍然使用硬编码的类COUNTRIES。所以过滤，分页和搜索不起作用。我怎样才能让它工作?

主要目标是在页面上创建一个框架表，获取数据，当数据被获取时，显示正确的表和api的响应。

理想的情况是这样的:

<ngbd-table-skeleton ngIf=loading></ngbd-table-skeleton>
<ngbd-table-complete ngIf=!loading [data]="countries"></ngbd-table-complete>

我将在OnInit中设置加载为true，获取数据，设置数据，设置加载为false，显示具有工作分页，过滤和排序的正确表。

这可能是完全不可能的，我的Angular知识还没有到位。如果这样做是可能的，我很乐意听到任何人有一个可能的解决方案。

Answer 1

关键是使用" country.service "。您应该更改为返回API的值，而不是硬编码的"countries"。此外，您需要使用"pipe(map)">

你真的应该把sortColumn, sortDirection, pageSize, page和searchTermsort的值传递给API，只返回必要的元素。通过这种方式，您应该将函数_search替换为类似

的内容。函数_search变成了

private _search(): Observable<SearchResult> {
const { sortColumn, sortDirection, pageSize, page, searchTerm } =this._state;
return this.httpClient.get(....) //<--call to your API

如果有几个项目，你可以"缓存";值和返回值或者缓存或者调用你的API返回整个;国家

countries:Country[]; //<--a variable to store the whole countries
private _search(): Observable<SearchResult> {
const { sortColumn, sortDirection, pageSize, page, searchTerm } =
this._state;

//if "this.countries" have values, obs%= of(this.countries)
//else obs$=the call to your API
const obs$=this.countries?of(this.countries):
this.httpClient.get(..).pipe(tap((res: Country[])=>{
this.countries=res;
}))
//we work with observables using "pipe"
return obs$.pipe(
map((res: Country[]) => {
//you sort:
let countries = sort(res, sortColumn, sortDirection);
//filter
countries = countries.filter((country) =>
matches(country, searchTerm, this.pipe)
);
const total = countries.length;
//paginate
countries = countries.slice(
(page - 1) * pageSize,
(page - 1) * pageSize + pageSize
);
return { countries, total };
})
);
}

可以看出，处理可观察对象与处理数组非常接近。你"enclosed"在管道中。map