选择不适用于角度

选择不适用于角度

本文介绍了Materializecss 选择不适用于角度 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在从服务器获取数据并填充一个数组.使用该数组,我填充了 但是 materializecss 没有正确显示它.

如您所见,我正在关注动态加载的 materializecss 提示:

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

category-selector.component.ts

导出类 CategorySelectorComponent 实现 OnInit {构造函数(私有类别服务:类别服务){}类别 = [];ngOnInit() {this.enableSelect();this.categoryService.getCategories().subscribe((结果)=>{this.loadCategories(result);},(错误) =>{控制台日志(错误);})}私人启用选择(){var elem = document.getElementById('select_categories');var instance = M.Select.init(elem, {});}私人负载类别(类别:类别[]){类别.forEach((类别) =>{this.categories.push(category);});this.enableSelect();}}

category-selector.component.html

选择类别
<div class="input-field col s12"><select id="select_categories"><option *ngFor="let category of Categories" value="{{category}}">{{分类名称}}</选项></选择><label>类别</label>

解决方案

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

ngOnInit() {this.enableSelect();this.categoryService.getCategories().subscribe((结果)=>{this.loadCategories(result);setTimeout(() => {($('select') as any).formSelect();//jquery 或//var elem = document.getElementById('select_categories');//var instance = M.Select.init(elem, {});}, 2000);},(错误) =>{控制台日志(错误);})}

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:

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 选择不适用于角度 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 08:47