Функция начальной загрузки плагина jQuery не работает в Angular6 - PullRequest
Новая
       21

Функция начальной загрузки плагина jQuery не работает в Angular6

0 голосов
/ 27 августа 2018

Я довольно новичок в 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>

Во всех местах, где можно увидеть вызов прокомментированной функции, я проверил, были ли уже добавлены опции, и была ли разметка bootstrap-select уже создана и была. Но после вызова функции во всех этих местах ничего не изменилось.

Важно знать, что я не получаю никаких ошибок ни в lint, ни в терминале (ng serve), ни в браузере в окне консоли. Так что я действительно не знаю, как это решить.

Кроме того, я очень часто вижу, что люди предоставляют некоторые скрипки и т. Д., Но я на самом деле не знаю, как создать приложение Angular6 в этих файлах, которое, как мне кажется, обычно требуется для Angular.

Я действительно надеюсь, что упускаю что-то очень простое, и вы можете помочь мне это исправить.

...