Materializecss + Angular Cli - 选择组件未正确下拉答案

【问题标题】：Materializecss + Angular Cli - Select component not dropping down correctlyMaterializecss + Angular Cli - 选择组件未正确下拉
【发布时间】：2019-10-29 17:54:36
【问题描述】：

我在我的angular-cli 项目中使用materializecss，在我的项目中，所有选择的组件都具有以下图像的行为：

第一次点击时，没有任何组件正常工作，第一次点击时它们不会下拉，只有第二次点击才会显示内容。

选择代码如下：

<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;
 });

但它不能正常工作。有什么建议可以解决这个问题吗？

提前致谢

【问题讨论】：

我的建议是使用有角度的材料。如果你想在你的应用中使用材料设计，角度材料组件是终极的。
@sibabratswain 感谢您的评论。确实我正在考虑更改为 Angular Material，但在我需要测试迁移后是否有许多布局问题需要修复之前。
基本上得到所有选项后，你必须调用该函数。您可以在调用material_select () 时使用setTimeOut。在 stackblitz 中查看我的解决方案。

标签： javascript angular materialize

【解决方案1】：

我第一次使用 materializecss 来解决/检查您的问题。它工作得很好。

请看看这个。首先，我在 index.html 文件中添加了 cdns

<!-- 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="{{option.value}}"  *ngFor="let option of options">{{option.name}}</option>
            </select>
            <label>Materialize Select</label>
        </div>
    </div>
</div>

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

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

我看到它工作正常。

stackblitz

【讨论】：