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);

}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags