bootstrap-select下拉选项有时无法加载

Question

我使用带有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>

附上两张图片，一张有问题，另一张没有问题。

Answer 1

从我看到你可能需要放置一个ngIf语句，等到选项加载后再显示下拉列表。

在您实际拥有数据之前可能会填充

您还可以将get请求作为承诺。通过这种方式，您可以始终确保它将解决并为您提供所需的响应，即.subscribe（）

进一步看你应该.map并通过next（）将结果返回到observable的订阅或者订阅可观察的http调用

Answer 2

问题似乎是 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>

Answer 3

我通过以下解决方案进行了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工作。如果您有更好的解决方案，请分享。

感谢。

Answer 4

你好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。

Answer 5

添加延迟。

   setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);

Answer 6

您可以致电：

$('.selectpicker').selectpicker('refresh');

在component.ts中添加函数：

ngAfterViewInit() {

    $('.selectpicker').selectpicker('refresh');
}

在视图渲染后调用。

Answer 7

如果您从nmp安装了bootstrap-select，则必须将文件的路径放置在配置文件angular.json中，如果bootstrap-select软件包的files文件夹未与{{ 1}}，将文件夹放置在Angular项目中的某个位置并在npm文件中指定路径就足够了

angular.json