NativeScript Angular multiple ListPickers

Question

I'm making an App using NativeScript with Angular. There is a page that has two labels that need to act as dropdown select boxes. They are set to show a listPicker.

A sample of the HTML

<StackLayout orientation="horizontal" class="field_row">
   <Label text="Type:" class="field_label"></Label>
   <Label text="{{ job_type }}" (tap)="showList('type')" class="type job_field dd-label"></Label>
</StackLayout>
<StackLayout orientation="horizontal" class="field_row">
   <Label text="Category:" class="field_label"></Label>
   <Label text="{{ job_category }}" (tap)="showList('category')" class="category job_field dd-label"></Label>
</StackLayout>
<StackLayout orientation="horizontal" class="field_row" [visibility]="assignActive ? 'visible' : 'collapse'">
   <Label text="Assigned:" class="field_label"></Label>
   <Label text="{{ job_worker }}" (tap)="showList('workers')" class="workers job_field dd-label"></Label>
</StackLayout>

The function to show the list

public showList(name){
  this.showType = false;
  this.showCat = false;
  this.showPropStat = false;
  this.showWorkers = false;
  this.showListPicker = true;
    switch(name) {
      case 'type':
        this.showType = true;
        console.log(this.jobTypes);
        break;
      case 'category':
        this.showCat = true;
        console.log(this.jobCats);
        break;
      case 'status':
        this.showPropStat = true;
        break;
      case 'workers':
        this.showWorkers = true;
        console.log(this.jobWorkers);
        break;
    }         
}

When I click the labels for Type it shows correctly, but clicking the Category or Workers it displays an area for the listpicker, but there are no items showing in them.

The part where the list items are set will output the correct list to the console.

Answer 1

Strangely by adding another row to the GridLayout and putting the listpickers in their own row seems to have fixed the issue.