bootstrap-select下拉选项有时无法加载 [英] bootstrap-select dropdown options not getting loaded sometime

问题描述

我在Angular 4.3.5中使用bootstrap-select 1.12.4版本.

I'm using bootstrap-select 1.12.4 version with Angular 4.3.5.

我正在尝试使用http调用和异步管道加载下拉选项.

I'm trying to load the dropdown options using http call and async pipe.

我面临的问题是，在我刷新页面时，大多数时候都不会加载select下拉选项.但是有时会加载选项.我不确定我在这里犯了什么错误.有人能帮我一下吗?预先感谢.

The issue I'm facing is, The select dropdown options are not getting loaded most of the time with I refresh the page. But sometimes the options load. I'm not sure what mistake I'm doing here. Can anyone help me here? Thanks in advance.

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>

附加了两个图像，一个图像有问题，另一个图像没有问题.

Attached two images, one with the issue and the other one without issue.

推荐答案

您好，萨米，我知道这为时已晚，因为在视图中调用{{refreshSelect()}}的答案是正确的，但它会陷入无限循环这打破了引导选择，但是我发现了合适的解决方案，这可能可以节省一天的时间.

Hello samy i know this is too late to answer as your answer is bit correct with {{ refreshSelect() }} calling in view but it goes in infinite loop which breaks the bootstrap-select however i found the proper solution for it may be this can save someones day.

  this.http.get('http://google.com').subscribe(data => {
    console.log(data);
  }, error => {
    console.log(error);
  }, () => {
    setTimeout(() => {
      $('.selectpicker').selectpicker('refresh');
    });
  });

看看第三个参数，它是subscription方法中的回调，可用于在内容加载后刷新selectpicker.

have a look at the third parameter it's the callback in subscribe method which can be used to refresh the selectpicker after the content has been loaded.

这篇关于bootstrap-select下拉选项有时无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！