我使用带有Angular 4.3.5的bootstrap-select 1.12.4版本。
我尝试使用http调用和异步管道加载下拉选项。
我面临的问题是,我刷新页面时大部分时间都没有加载选择下拉选项。但有时选项加载。我不确定我在这里做了什么错。有人能帮我一下吗?提前谢谢。
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>
附上两张图片,一张有问题,另一张没有问题。
答案 0 :(得分:0)
从我看到你可能需要放置一个ngIf语句,等到选项加载后再显示下拉列表。
在您实际拥有数据之前可能会填充
您还可以将get请求作为承诺。通过这种方式,您可以始终确保它将解决并为您提供所需的响应,即.subscribe()
进一步看你应该.map并通过next()将结果返回到observable的订阅或者订阅可观察的http调用
答案 1 :(得分:0)
问题似乎是 class =&#34; selectpicker&#34; 。当我删除该课程时,下拉列表工作正常,但我没有获得bootstrap-select风格。
<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>
</div>
<ng-template #loadingSelect>Loading User Data dropdown...</ng-template>
答案 2 :(得分:0)
我通过以下解决方案进行了bootstrap-select工作,我确信可以有更好的解决方案。只是分享我的解决方案。
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.在所有import语句之后,在我的component.ts中添加了以下行。
declare var $:any;
3.在我的component.ts中增加了以下功能
refreshSelect() {
$('.selectpicker').selectpicker('refresh');
}
4.迭代选择选项后,最终在我的模板中调用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>
我确信第4步可以更好的方式完成。关键是在ngFor迭代之后调用$('.selectpicker').selectpicker('refresh');
方法来使bootstrap-select工作。如果您有更好的解决方案,请分享。
感谢。
答案 3 :(得分:0)
你好samy我知道这已经太迟了,因为你的答案是正确的{{refreshSelect()}}在视图中调用但是它进入了无限循环,这打破了bootstrap-select然而我找到了适当的解决方案也许这可以节省一些人。
this.http.get('http://google.com').subscribe(data => {
console.log(data);
}, error => {
console.log(error);
}, () => {
setTimeout(() => {
$('.selectpicker').selectpicker('refresh');
});
});
查看第三个参数,它是subscribe方法中的回调,可用于在加载内容后刷新selectpicker。
答案 4 :(得分:0)
添加延迟。
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
答案 5 :(得分:0)
您可以致电:
$('.selectpicker').selectpicker('refresh');
在component.ts中添加函数:
ngAfterViewInit() {
$('.selectpicker').selectpicker('refresh');
}
在视图渲染后调用。
答案 6 :(得分:0)
如果您从nmp
安装了bootstrap-select,则必须将文件的路径放置在配置文件angular.json
中,如果bootstrap-select软件包的files文件夹未与{{ 1}},将文件夹放置在Angular项目中的某个位置并在npm
文件中指定路径就足够了
angular.json