引导-选择下拉选项有时不会加载。
引导-选择下拉选项有时不会加载。
提问于 2017-08-22 01:40:33
我使用引导-选择1.12.4版本的角4.3.5。
我正在尝试使用http调用和异步管道加载下拉选项。
我面临的问题是，select下拉选项在大多数情况下都不会在刷新页面时加载。但有时会带来很多选择。我不知道我在这里犯了什么错误。这里有人能帮我吗？提前谢谢。
component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-bob-report',
templateUrl: './bob-report.component.html',
styleUrls: ['./bob-report.component.css']
})
export class BobReportComponent implements OnInit {
observableOptions: Observable<any>;
constructor(private http: HttpClient) { }
ngOnInit() {
this.observableOptions = this.http.get('assets/data/users.json');
}
}component.html
<form>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="selectpicker" data-live-search="true">
<option *ngFor="let option of observableOptions | async" value={{option.id}}> {{option.value}} </option>
</select>
</div>
</form>附上两张图片，一张带有问题，另一张没有问题。
回答 7
Stack Overflow用户
发布于 2017-12-15 07:03:18
你好，samy，我知道这已经太晚了，因为您的答案在视图中调用{{ refreshSelect() }时是正确的，但是它是无限循环的，它破坏了引导-选择，但是我找到了正确的解决方案，因为这可能会在某一天节省一些时间。
this.http.get('http://google.com').subscribe(data => {
console.log(data);
}, error => {
console.log(error);
}, () => {
setTimeout(() => {
$('.selectpicker').selectpicker('refresh');
});
});查看第三个参数，它是在订阅方法中的回调，它可以用于在加载内容后刷新select选择符。
Stack Overflow用户
发布于 2017-08-23 02:51:08
我通过下面的解决方案进行了引导-选择工作，我相信会有一个更好的解决方案。分享我的解决方案。
1.将以下代码添加到typings.d.ts中
interface JQuery {
addClass(className: string): JQuery;
attr(attributeName: string, value: string|number): JQuery;
}
interface JQuery {
selectpicker(options?: any, callback?: Function):any;
}2.在所有导入语句之后，在我的component.ts中添加了下面一行。
declare var $:any;3.在我的component.ts中添加了以下函数
refreshSelect() {
$('.selectpicker').selectpicker('refresh');
}4.最后，在迭代select选项之后，在模板中调用refreshSelect()方法。
<div *ngIf="observableOptions | async; let loadedOpts; else loadingSelect;">
<select class="selectpicker" data-live-search="true">
<option *ngFor="let opt of loadedOpts" value={{opt.id}}> {{opt.value}} </option>
</select>
{{refreshSelect()}}
</div>
<ng-template #loadingSelect>Loading User Data dropdown...</ng-template>我相信这第四步可以做得更好。关键是在$('.selectpicker').selectpicker('refresh');迭代之后调用ngFor方法，使引导选择工作。如果你有更好的解决方案，请分享。
谢谢。
Stack Overflow用户
发布于 2018-02-02 08:01:11
加一个延迟。
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45807711
复制相关文章
相似问题
腾讯云开发者
