Two dropdowns not working in Angular

[iqbal0304]

I am working on a page that has 2 dropdowns on it using angular. Here is the sample code:

<StackLayout class="input-field">
    <Label text="Location" class="label"></Label>
    <DropDown #dd1 backroundColor="blue" [items]="locs" [selectedIndex]="selectedIndexLoc" (selectedIndexChanged)="onchangeLoc($event)"
        (opened)="onopenLoc()" >
    </DropDown>
    <StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout class="input-field">
    <Label text="Department" class="label"></Label>
    <DropDown #dd2 [items]="depts" [selectedIndex]="selectedIndexDept" (selectedIndexChanged)="onchangeDept($event)"
        (opened)="onopenDept()" hint="Select a department">
    </DropDown>
    <StackLayout class="hr-light"></StackLayout>
</StackLayout>

The problem is it only works for one dropdown, eiher dd1 (if dd2 commented out) or dd2 (if dd1 commented out).

What am I missing here? Thank you for your help.

Iqbal

[PeterStaev]

Hey @iqbal0304 , just saying does not work, does not give much useful info. Please provide more details on what exactly does not work as well your TS source as you have bound events and properties.

[iqbal0304]

Both of drop-downs using data service based on Sqlite. After I changed into hardcoded array it works like the given angular example. I guess the problem comes from asynchronous behavior from Sqlite and that what I need to figure it out. Perhaps you have another example that using Sqlite as its datasource? 😄

Meanwhile, thank you for your help, Peter.

[PeterStaev]

If you are using async services should't you be using the async angular pipe for the items? So something like:

<StackLayout class="input-field">
    <Label text="Location" class="label"></Label>
    <DropDown #dd1 backroundColor="blue" [items]="locs | async" [selectedIndex]="selectedIndexLoc" (selectedIndexChanged)="onchangeLoc($event)"
        (opened)="onopenLoc()" >
    </DropDown>
    <StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout class="input-field">
    <Label text="Department" class="label"></Label>
    <DropDown #dd2 [items]="depts | async" [selectedIndex]="selectedIndexDept" (selectedIndexChanged)="onchangeDept($event)"
        (opened)="onopenDept()" hint="Select a department">
    </DropDown>
    <StackLayout class="hr-light"></StackLayout>
</StackLayout>

[iqbal0304]

Hi Peter,

I am trying to use async pipe, but error occurs, "Invalid argument '' for pipe 'AsyncPipe'". I am using similar Promise method and it works fine with ListView control. Perhaps there is another step that I miss, as a angular newbie 😄

Could you help me on this matter? Thank you for your help.

dropdown2.zip

[PeterStaev]

From what I see you aren't using the Promises correctly.

[iqbal0304]

When I remove async pipe in items declaration, it works, asynchronously. Thank you four help, Peter. 😄

ps. I change the title to clarify the exact question

[dgt009]

@iqbal0304 Could you please show me how are you handling the SelectedIndex variables in your component file? I am trying to handle the selectedIndex but, it gives me ORIGINAL EXCEPTION: selectedIndex should be between [0, items.length - 1] . I am populating the drop-down list asynchronously. and I have a requirement where I need those selectedIndex once I click a button.

Here is my code if @PeterStaev could help me.

<StackLayout >
        <DropDown #dd1 backroundColor="red" [items]="poleArray"  class="drop-down" [selectedIndex]="selectedPoleIndex"
                  (selectedIndexChanged)="onPolechange($event)" (opened)="onopen()"
                  row="0" colspan="2" hint="Select Pole">
        </DropDown>
</StackLayout>

<StackLayout>
        <DropDown #dd2 backroundColor="red" [items]="countryArray"  class="drop-down" [selectedIndex]="selectedCountryIndex"
                  (selectedIndexChanged)="onCountrychange($event)" (opened)="onopen()"
                  row="0" colspan="2" hint="Select Country Name">
        </DropDown>
</StackLayout>

public selectedPoleIndex = 1;
public selectedCountryIndex = 1;
public poleArray: Array<string>;
public countryArray: Array<string>;

public onSubmit(){
      console.log('pole --> '+this.poleArray[this.selectedPoleIndex]);
      console.log('country --> '+this.countryArray[this.selectedCountryIndex]);
}

[jeremypele]

Hi, I have the same issue and got the following log message when trying to open the second one

Can't find keyplane that supports type 5 for keyboard iPhone-PortraitChoco-PhonePad; 
using 2899782657_PortraitChoco_iPhone-Complex-Pad_Default

Edit : Actually it doesn't work if both dropdowns are within the same layout node (e.g: GridLayout)

[PeterStaev]

@iqbal0304 , please try version 1.5.5 of the plugin. It should resolve your problems. But still you are using in the demo attached the async/promises wrong. If you use async pipe then the object to wich you bind the property must be a promise. In your case it is an array, so you should not be using the async pipe.

@jeremypele you could also try to see if the new version fixes your problem, but there is no limitation that there could not be 2 drop downs in the same layout. If you still have problems please submit a separate issue with your code/sample.