如何将 Angular 引导表"Complete Example"与真实服务一起工作？

Question

我开始在angular中做一些事情。

我在我当前的项目(名为"完整示例"的项目(中实现了这个示例：

https://ng-bootstrap.github.io/#/components/table/examples

一切都很好，但是我有一个简单的问题，但我没有找到答案。如何将此示例用于实际服务？我需要做什么？

我已经运行了一个Web api，并尝试了一些解决方案，但没有成功。

我在country.service.ts:中做到了这一点

get countries$(): Observable<Country[]> {  
return this.http.get<Country[]>(`${environment.apiUrl}/pois`);  
}  
//get countries$() { return this._countries$.asObservable(); } 
get total$(): Observable<any> {  
return this.http.get(`${environment.apiUrl}/pois/total`);  
}
//get total$() { return this._total$.asObservable(); }

数据显示在我的表中，但示例停止正常工作。

这是将这个示例用于实际服务的正确方式吗？

提前谢谢。

Answer 1

我喜欢ng bootstrap团队的工作，但我认为这显然不是一个好例子。在我看来，让所有人都参与服务是不清楚的。

我在这个SO中用材料做了一些有棱角的东西。一般来说，您需要一个带有两个功能的API

getLength(string filter)
//and 
getData(page:number,pageSize:number,filter:string,sortField:string,sortDirection:string)

在这个另一个堆栈中，使用ng引导

想法类似，我们定义了一些辅助变量

total: number;
filter = new FormControl();
page:number=1;
pageSize:number=5;
elements$:Observable<any>
pag:BehaviorSubject<any>=new BehaviorSubject<any>(null);
paginator$=this.pag.asObservable();
sort:any={active:"position",direction:'desc'};
isLoadingResults = true;

在ngOnInit中，我们订阅了filter.value更改

const obsFilter=this.filter.valueChanges.pipe(
debounceTime(200),
startWith(null),
switchMap((res: string) => this.dataService.getLength(res)),
tap((res: number) => {
this.page=1;
this.total = res;
})
);
this.elements$=merge(obsFilter, this.paginator$)
.pipe(
distinctUntilChanged(),
switchMap(res => {
return this.dataService.getData(
this.page,
this.pageSize,
this.filter.value,
this.sort.active,
this.sort.direction
);
}),
tap(_ => (this.isLoadingResults = false))
)

我们将使用辅助程序this.paginagtor$，当页面或pageSize发生变化以及排序发生变化时，它会发出一个值，因此我们的函数排序变得像

onSort({column, direction}: SortEvent) {
// resetting other headers
this.sort={active:column,direction:direction}
this.headers.forEach(header => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.pag.next(this.sort)
}

html(参见我们如何在分页器中拆分[(ngModel(](

<form>
<div class="form-group form-inline">
Full text search: <input class="form-control ml-2" type="text" name="searchTerm" [formControl]="filter"/>
<span class="ml-3" *ngIf="isLoadingResults">Loading...</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" sortable="position" (sort)="onSort($event)">No.</th>
<th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
<th scope="col" sortable="weight" (sort)="onSort($event)">Weight</th>
<th scope="col" sortable="symbol" (sort)="onSort($event)">Symbol</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let element of elements$ | async">
<th scope="row">{{ element.position }}</th>
<td>
<ngb-highlight [result]="element.name" [term]="filter.value"></ngb-highlight>
</td>
<td><ngb-highlight [result]="element.weight | number" [term]="filter.value"></ngb-highlight></td>
<td><ngb-highlight [result]="element.symbol" [term]="filter.value"></ngb-highlight></td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between p-2">
<ngb-pagination
[collectionSize]="total" [page]="page" (pageChange)="page=$event;pag.next($event)" [pageSize]="pageSize">
</ngb-pagination>
<select class="custom-select" style="width: auto" name="pageSize" [ngModel]="pageSize" (ngModelChange)="pageSize=$event;pag.next(-pageSize)">
<option [ngValue]="5">5 items per page</option>
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="20">20 items per page</option>
</select>
</div>
</form>