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解决/检查您的问题。而且效果很好。

请看一下。首先，我将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>

然后我添加了这样的html

<div class="container">

    <div class="row">
        <div class="col-md-12">

            <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <label>Materialize Select</label>

        </div>
    </div>
</div>

然后在我的ts文件中添加了这两个javascript行

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

我看效果很好。