Select 无法使用 Materialize 在 Angular7 中呈现

Question

我正在尝试在我的应用程序中使用 Angular 7 和 Materialize 放置一个 select。但是浏览器中不显示此项。

在文档和一些 Whosebug 帖子中说我必须使用以下脚本初始化组件：

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>

Select 无法使用 Materialize 在 Angular7 中呈现

Select not render in Angular7 with Materialize

html

materialize

angular