出于某种原因,刷新订阅方法中的selectpicker元素并不适合我。 我在订阅方法之外调用refresh(为了在加载数据时禁用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,我宣布&#34; street&#34;应该在&#34; city&#34;正在被选中:
$('#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)
}
谢谢!
答案 0 :(得分:1)
行,
更改为'changed.bs.select'
而不是'hidden.bs.select'
修复了它。 : - )