Javascript 物化ECSS+；Angular Cli-未正确下拉选择组件

我在我的

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>

第二次尝试

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

但它不能正常工作。 有什么建议我如何解决这个问题

---

提前感谢

我第一次使用了物化ECSS来解决/检查您的问题。它工作得非常好

请看看这个。首先，我将CDN添加到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>

我看它很好用。

---

我的建议是使用棱角材料。如果您想在应用程序中使用材质设计，角度材质组件是终极的。@sibabratswain谢谢您的评论。实际上，我正在考虑更改为角度材质，但在我需要测试迁移后是否有许多布局问题需要修复之前，您必须在获得所有选项后基本上调用该函数。调用

material\u select（）

时，可以使用

setTimeOut

。在stackblitz中查看我的解决方案。

<!-- 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>

<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>

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