Question

我对Angular还是很陌生，到目前为止一切都很顺利，但现在看来无论我从Google搜索尝试了哪些操作，我都无法按照需要的方式进行引导选择。

我想做的是，我想从服务中获取选择的选项数据，然后将其添加到选择中（我为此使用ngFor*），然后添加了该信息，我需要调用.selectpicker('render')才能使选项出现在bootstrap-select插件创建的标记中。

来自我的组件：

import { Component, OnInit, QueryList, ViewChildren, AfterViewInit } from '@angular/core';
import { IFilter } from './filter';
import { CarService } from '../car.service';
import 'jquery';

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.scss']
})
export class FiltersComponent implements OnInit, AfterViewInit {

  public brand: string;

  public brandSelected: string;

  public brandsFilter: string[] = [];

  @ViewChildren('brand') brandModel: QueryList<any>;

  public cars = [];

  constructor(private _carService: CarService) { }

  ngOnInit() {
    this._carService.getCars()
      .subscribe((data): void => {
          for (const car of data) {
            this.brandsFilter.push(car.brand);
          }
          // $('#brand').selectpicker('render');
      });
      // $('#brand').selectpicker('render');
  }

  ngAfterViewInit() {
    this.brandModel.changes.subscribe(t => {
      this.brandNgForRendered();
    });

    // $(document).ready(x => {
    //   $('#brand').selectpicker('render');
    // });
  }

  brandNgForRendered() {
    // $('#brand').selectpicker('render');
  }

  onBrand(value: string): void {
    this.brand = value;
    // further code
  }
}

如您所见，我尝试在各个地方使用selectpicker函数来更新前端从carService接收的值中的选择。

HTML如下所示

<select #brand (change)="onBrand(brand.value)" name="brand" id="brand" class="form-control selectpicker show-tick" data-live-search="true" title="Choose brand" ng-model="brandSelected">
  <ng-container *ngFor="let brandItem of brandsFilter">
    <option  value="{{ brandItem }}">{{ brandItem }}</option>
  </ng-container>
</select>

在所有可以看到注释的函数调用的地方，我检查了是否已经添加了选项以及是否已经创建了引导选择标记。但是仍然在所有这些位置调用了函数之后，什么都没有改变。

重要的是要知道，无论是皮棉，终端机（ng serve）还是控制台窗口中的浏览器，我都没有收到任何错误。所以我真的没有办法解决这个问题。

此外，我经常看到人们提供一些小提琴等。但是我实际上不知道如何在这些文件中构建Angular6应用，我想这通常是Angular所需要的。

我真的希望我缺少一些非常简单的东西，您可以帮助我解决此问题。

jQuery插件引导选择功能在Angular6中无效

0 个答案: