My current setup involves Angular version 7.0.1 and ng2-smart-table version 1.4.0. The issue I'm facing is that each search within the table triggers a new API request to fetch data. What I actually want is for only the latest search request to be processed, while canceling any previous pending requests.
Here is a snippet of my HTML code:
<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
The class handling my data source:
export class DataSource extends LocalDataSource {
protected conf: ServerSourceConf;
private lastRequestCount = 0;
constructor(conf: ServerSourceConf | {} = {}, private service: DataServiceService) {
super();
this.conf = new ServerSourceConf(conf);
this.conf.totalKey = 'total';
}
count() {
return this.lastRequestCount;
}
getElements(): Promise<any> {
return this.requestElements().map(res => {
this.lastRequestCount = this.extractTotalFromResponse(res);
this.data = this.extractDataFromResponse(res);
return this.data;
}).toPromise();
}
// Other methods omitted for brevity...
}
Data-service.service:
import {Injectable} from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataServiceService {
url = environment.server;
constructor(private http: HttpClient) { }
getData(endpoint: string, options?: any) {
return this.http.get(this.url + endpoint, {params: options}).pipe();
}
}