Materializecss + Angular Cli - Выберите компонент, не выпадающий правильно

Question

Я использую materializecss в моем проекте angular-cli и в моем проекте все выбранные компоненты с изображением ниже:

При первом щелчке ни один компонент не работает правильно, они не выпадают в раскрывающемся списке при первом щелчке, только при втором щелчке, отображающем содержимое.

Следуйте ниже выбранного кода:

<select [ngModel]="initialValue" class="maintextcolor" (ngModelChange)="changeCategory($event)" id="selectCategory"
            materialize="material_select">
   <option value="" disabled selected>Selecione</option>
   <option *ngFor="let option of options" [ngValue]="option._id">{{option.name}}</option>
</select>

Я видел в github несколько предложений, таких как:

Первая попытка:

$('#selectCategory').material_select();
document.querySelectorAll('.select-wrapper').forEach(t => t.addEventListener('click', e=>e.stopPropagation())) 

Вторая попытка

$('select').material_select();
$('select').change((e) => {
   this.model[e.currentTarget.name] = e.currentTarget.value;
 });

, но она не работаетдолжным образом. Есть какие-нибудь предложения, как я могу решить эту проблему?

Заранее спасибо

Answer 1

Я впервые использовал materializecss для решения / проверки ваших проблем. И это прекрасно работает.

Пожалуйста, посмотрите на это. Сначала я добавил cdns в мой файл index.html

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Затем я добавил html, как это

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="{{option.value}}"  *ngFor="let option of options">{{option.name}}</option>
            </select>
            <label>Materialize Select</label>
        </div>
    </div>
</div>

Затем в мой файл ts добавил эти две строки javascript

ngOnInit() {
   setTimeout(()=>{
      const elems = document.querySelectorAll('select');
      const instances = M.FormSelect.init(elems, 'options');
    });
 }

Вижу, работает нормально.

стекаблитц