Materializecss选择不适用于角度5

Question

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

您可以看到，我正在跟踪动态加载的实现技巧：

您必须如下所示初始化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>

Answer 1

我知道有点晚了，但这对我有用：