选择not render in Angular7 with Materialize

Question

我正尝试在我的Angular 7应用程序中添加一个select并实现它。但是，此项目不会显示在浏览器中。

在文档和一些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

解决方案是仅在select已经显示时才对其进行初始化

这是我的.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>