Angular

Question

出于某种原因，在订阅方法中刷新 selectpicker 元素对我不起作用。我在订阅方法之外调用刷新（以便在加载数据时禁用选择器），但是当我在更新选项后尝试刷新它时，它似乎不起作用。这是相关代码：

我的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>

使用 ngAfterViewInit，我声明 "street" 应该在选择 "city" 时更新：

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

这就是我订阅网络服务以获取数据的方式：

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

谢谢！

Answer 1

好的，更改为 'changed.bs.select' 而不是 'hidden.bs.select' 修复了它。 :-)

Angular - 使用 Web 服务结果更新 Selectpicker 选项

Angular - Updating Selectpicker options with web service results

typescript

observable

bootstrap-select