Выберите не визуализировать в Angular7 с помощью Materialise

Question

Я пытаюсь вставить select в свое приложение с Angular 7 и Materialize. Однако этот элемент не отображается в браузере.

В документации и в некоторых публикациях Stackoverflow говорится, что я должен инициализировать компонент с помощью следующего сценария:

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems, options);
});

// Or with jQuery
$(document).ready(function(){
  $('select').formSelect();
});

// Or
$(document).ready(function () {
  $('select').material_select();
});

Но он по-прежнемуу меня не работает

angular.json

"styles": [
  "./node_modules/material-icons/iconfont/material-icons.css",
  "./node_modules/materialize-css/dist/css/materialize.min.css",
  "src/styles.scss"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/materialize-css/dist/js/materialize.min.js"
]

component.html

<div class="row">
  <select>
    <option value="1">Cuenta 1</option>
    <option value="2">Cuenta 2</option>
  </select>
</div>
<script>
  $(document).ready(function(){
    $('select').formSelect();
  });
</script>

Может кто-нибудьпомогите пожалуйста?

Спасибо

Answer 1

Решение состоит в том, чтобы инициализировать выбор только тогда, когда он уже показывает

Вот мои .ts

import * as M from 'materialize-css';

setTimeout(() => {
  M.FormSelect.init(document.querySelectorAll('mySelect'), {});
}, 30);

И мой .html

<div class="row">
  <select id="mySelect">
    <option value="1">Cuenta 1</option>
    <option value="2">Cuenta 2</option>
  </select>
</div>