Angular - Updating Selectpicker options with web service results

Question

For some reason, refreshing a selectpicker element inside a subscribe method doesn't work for me. I'm calling refresh outside of the subscribe method (in order to disable the selectpicker while data is being loaded), but when I try to refresh it after I update the options, it doesn't seem to work. Here's the relevant code:

My HTML:

<div class="form-group col-md-2 pull-right">
  <label for="city">City</label>
  <select [disabled]="!properties.get('city').enabled" [(ngModel)]="properties.get('city').value" name="city" id="city" class="form-control selectpicker" data-live-search="true">
    <option dropdownAlignRight="true" [ngValue]="">{{properties.get('city').spaceholder}}</option>
    <option dropdownAlignRight="true" *ngFor="let option of properties.get('city').options" [ngValue]="option.id">{{option.text}}</option>
  </select> 
</div>
<div class="form-group col-md-2 pull-right">
  <label for="street">Street</label>
  <select [disabled]="!properties.get('street').enabled" [(ngModel)]="properties.get('street').value" name="street" id="street" class="form-control selectpicker" data-live-search="true">
    <option dropdownAlignRight="true" [ngValue]="">{{properties.get('street').spaceholder}}</option>
    <ng-container *ngFor="let option of properties.get('street').options">
      <option dropdownAlignRight="true" [ngValue]="option.id">{{option.text}}</option>
    </ng-container>
  </select> 
</div>

Withing ngAfterViewInit, I'm declaring that "street" should be updated when "city" is being selected:

$('#city').on('hidden.bs.select', function (event, clickedIndex, newValue, oldValue) {
  var url = GLOBALS.getStreetsByCityIdUrl(that.properties.get('city').value);
  that.updateDependentPicklist(url, 'street');
});

And this is how I'm subscribing to the web service, in order to fetch the data:

updateDependentPicklist(picklistUrl, propertyId){
    var that = this;
    that.properties.get(propertyId).options = null;
    that.properties.get(propertyId).enabled = false;
    that.properties.get(propertyId).spaceholder = 'Loading Options...';
    /*
     * This one works!
     * Streets "Empty option" changes to Loading Options... and gets disabled
     */
    that.refreshSelectpicker(propertyId);
    this.webService.createGetService(picklistUrl)
    .subscribe(
      result => {
        if (result.coll && result.coll.length > 0){
          var resultCollection = result.coll;
          var optionsArr : [{id : string, text : string}] = [{id : null, text : null}];
          for (let i in resultCollection) {
            if (resultCollection.hasOwnProperty(i)) {
              var option = resultCollection[i];
              optionsArr.push({id : option['Id'], text : option['Name']});
            }
          }
          optionsArr.splice(0, 1);
          that.properties.get(propertyId).options = optionsArr;
          that.properties.get(propertyId).enabled = true;
          that.properties.get(propertyId).spaceholder = 'Choose...';
          //Nothing happens here...
          that.refreshSelectpicker(propertyId);
        }
        else {
          that.properties.get(propertyId).spaceholder = 'Nothing Found';
          that.properties.get(propertyId).enabled = false;
          //Nothing happens here...
          that.refreshSelectpicker(propertyId);
        }
      },
      error => {
        that.properties.get(propertyId).spaceholder = 'Error';
        that.properties.get(propertyId).enabled = false;
        //Nothing happens here...
        that.refreshSelectpicker(propertyId);
      }
    )
}

refreshSelectpicker(id){
    setTimeout(() => { 
      $("#"+id).selectpicker("refresh");
    }, 50)
}

Thanks!

Answer 1

OK, Changing to 'changed.bs.select' instead of 'hidden.bs.select' fixed it. :-)