Topic: Can I fill mdb-select with dynamic data?
SamEecloo pro asked 6 years ago
Hi,
can a mdb-select element be filled dynamically? I need this because my forms get created dynamically. So I fetch properties from the database and if it is of type 'dropdown', I build a mdb-select element. This will then be filled with values that I fetch from the database aswell.
I have the following select element:
<mdb-select [options]="loadPropertyValues(p.id)" placeholder="Type"></mdb-select>
and in my component.ts-file I have the following function
loadPropertyValues(propertyid){
return this.service.getpv(username,securitykey,propertyid).pipe(first()).subscribe(propertyvalues => {
return propertyvalues;});
}
This function returns an array like this:
[{id:1, value:'Value 01'},{id:2, value: 'Value 02'},...]
When I try this, it keeps refetching (but not showing) the data from the function (and thus calling my api) until the web-page becomes unresponsive... Is there another way to do so? I didn't find it in the documentation or here on the support-page. If it already is mentioned somewhere, I'm sorry in advance :-)
Thanks!
Sam
lalithkx free answered 4 years ago
I am using 7.5.4 Pro and I cannot get this working. I have other dynamic mdb-selects in my project but the difference is in this case I am building the options after AfterNgInitView() is called since I receive data in a callback from AWS. I also tried cdRef.detectChanges(). I cannot see any options in the select box. Here is my Template and TS. Can you please let me know what I am doing wrong?
TS:
this.patientCodepaths = result;
result.forEach((plan, i) => {
this.codepathToTrack.push({ value: i+1, label: plan.name.replace(new RegExp(' ', 'g'), '') });
});
this.codepathToTrack.sort((a, b) => a.value > b.value ? 1 : -1);
this.cdRef.detectChanges();
HTML:
<mdb-select mdbValidate class="font-weight-normal"
[options]="codepathToTrack"
(selected)="onCodepathSelected($event)"
formControlName="patientCodepathToTrackControl">
</mdb-select>
Thanks, Lalith
Arkadiusz Idzikowski staff commented 4 years ago
Please take a look at our example from documentation: https://mdbootstrap.com/docs/angular/forms/select-1/#update-options
Angular can't detect a change in the array after the push.
lalithkx free commented 4 years ago
Worked like a charm. Thanks Arkadiusz!
ak.leimrey pro answered 6 years ago
Hi, Sam. It is indeed possible.
It requires, of course, a little work from you.
Let's say you get the data from your backend. Several options, but they require a different setup. By default, the Select Component requires, as you look like this...
[{value:1, label:"Value 01"},{value:2, label: "Value 02"},…]
But, as we know, coding is never that simple. Our data looks different and more often than not, we don't simply use numbers as a value. We prefer to give them an actual value, when we picked one. The component always take an array that has always the same form. If you retrieve data from the backend, you have to transform your data into a fitting array.
Simply create an empty array that you initialize.
Kinda like this
public selectData: any[] = [];
After that you do a httpClient request in which you transform the data you receive into a valid select component form
this.httpClient.get(theUrlYouGetYourDataFrom).subscribe((data:any) => { this.selectData = this.transformYourDataIntoAValidComponentSelectObject(data); }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No