Materializecss 选择不适用于角度 5 [英] Materializecss select not working with angular 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:
You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates. 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 选择不适用于角度 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
