Materializecss选择不适用于Angular 5 [英] Materializecss select not working with angular 5

问题描述

我正在从服务器获取数据并填充数组.使用该数组，我填充了< select> 的< option> ，但是materializecss无法正确显示它.

I am getting data from the server and filling an array. With that array I fill the <option> of a <select> but materializecss is not showing it properly.

如您所见，我正在跟踪动态加载的实体化提示:

As you can see I am following the tip of materializecss of dinamic loading:

您必须初始化select元素，如下所示.另外，您将需要为页面生成的任何动态生成的选择元素单独调用. http://next.materializecss.com/select.html

category-selector.component.ts

export class CategorySelectorComponent implements OnInit {

  constructor(private categoryService: CategoryService) { }

  categories = [];

  ngOnInit() {
    this.enableSelect();
    this.categoryService.getCategories().subscribe(
      (result)=> {
        this.loadCategories(result);        
      },
      (error) => {
        console.log(error);
      }
    )
  }

  private enableSelect() {
    var elem = document.getElementById('select_categories');
    var instance = M.Select.init(elem, {});    
  }

  private loadCategories(categories: Category[]) {
    categories.forEach(
      (category) => {
        this.categories.push(category);
      }
    );
    this.enableSelect();
  }

}

category-selector.component.html

<h5>Select category</h5>
<div class="input-field col s12">
    <select id="select_categories">
      <option *ngFor="let category of categories" value="{{category}}">
        {{category.name}}
      </option>
    </select>
    <label>Category</label>
  </div>

推荐答案

我知道现在有点晚了，但这对我有用:

I know it's a little late but this worked for me:

ngOnInit() {
    this.enableSelect();
    this.categoryService.getCategories().subscribe(
      (result)=> {
        this.loadCategories(result);
        setTimeout(() => {
          ($('select') as any).formSelect(); // jquery or
          //var elem = document.getElementById('select_categories');
          //var instance = M.Select.init(elem, {}); 
        }, 2000);        
      },
      (error) => {
        console.log(error);
      }
    )
  }

这篇关于Materializecss选择不适用于Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！