I need to use a http service to fetch and filter data from the server for DropdownTree component.
The problems are,
Problem 1:
When I open dropdown before data loaded (simulating an API call with some delay), then filter input breaks as shown above.
But if I open dropdown after data loaded (just wait till the http complete), filter input appears correctly.
Problem 2:
Once search input is provided, the search event triggers and fetch data from API. But component data does not update.
@Component({
selector: "app-celldropdown",
template: `
<ejs-dropdowntree
#ddlelement
[fields]="fields"
allowFiltering="true"
(filtering)="onFiltering($event)"
filterType="contains"
showClearButton="false"
[placeholder]="placeholderText"
[filterBarPlaceholder]="filterBarPlaceholderText"
>
ejs-dropdowntree>
`,
styleUrls: ["./celldropdown.component.scss"],
})
export class MyDropDownListComponent implements OnInit {
constructor(private dataService: DataService) {}
public filterData!: object[];
public placeholderText = 'Select..';
public filterBarPlaceholderText = 'Search..';
fields = {
dataSource: this.filterData,
value: "id",
text: "name",
parentValue: "pid",
hasChildren: "hasChild",
};
ngOnInit() {
this.dataService.search("").subscribe((response) => {
this.fields = { ...this.fields, dataSource: response };
});
}
onFiltering(e: any) {
this.getData(e.text);
}
getData(text: string) {
this.dataService.search(text).subscribe((response) => {
this.filterData = response;
});
}
}
The 'dataService' i'm using is the service which execute API calls:
export class DataService {
constructor(private http: HttpClient) {
}
search(text: string): Observable<object[]> {
return this.http.get<object[]>(`${API_ROOT}/myEndpoint?search=${text}`);
}
}
