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

时间:2017-08-22 01:40:34

标签: angular bootstrap-select

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

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

dropdown works as expected

dropdown with issue, no options loaded

7 个答案:

答案 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