Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner.
However, the problem arises when the options fail to appear unless I refresh the page or log out and back in again. It seems to be random how many times I need to refresh before the options show up.
I initially suspected it was a Bootstrap or browser-related issue, but even in Chrome and Firefox, the problem persists.
I believe this could be an Angular2 bug, but for now, I'm on the hunt for a workaround or hack to get it functioning properly. I have a deadline to showcase the webpage tomorrow (fingers crossed).
Here's a snippet of the HTML code:
<select [(ngModel)]="selectedId" (change)="changeValue($event.target.value)">
<option *ngFor="let d of destinos | orderBy" [ngValue]="d.id">{{getName(d)}}</option>
</select>
Additional details:
The destinos data is being populated correctly, as I can see the output upon receiving the data.
The orderBy pipe used is custom-made, here's the code snippet:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'orderBy', pure: false })
export class OrderBy implements PipeTransform { transform(array: Array, args: string): Array { console.log(array); if (array == undefined) return; array.sort((a: any, b: any) => { if (a.toLowerCase() < b.toLowerCase()) { return -1; } else if (a.toLowerCase() > b.toLowerCase()) { return 1; } else { return 0; } }); return array; } }
Update: In case anyone encounters a similar issue, I managed to resolve it by removing the class="selectpicker" from the select element, which now consistently displays the options. It appears that the problem may be related to Bootstrap, so while it might not look as polished, it serves as a temporary fix for now.