在组件中使用ng多选择下拉列表而不是app.module.ts
在组件中使用ng多选择下拉列表而不是app.module.ts
提问于 2019-01-07 19:36:05
我正在尝试在另一个组件/页面中使用ng-多重选择-下拉列表组件(即。通过RouterModule.forRoot在app.mudule.ts注册)。我已经按照这个链接中的建议在我的组件中导入了它-
import { Component, OnInit, NgModule, NO_ERRORS_SCHEMA } from
'@angular/core';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule } from '@angular/forms';
@Component({
selector: "ng-multiselect-dropdown",
templateUrl: "./multiselect.component.html"
})
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot(),
FormsModule
],
schemas: [NO_ERRORS_SCHEMA]
})
export class MultiSelectComponent implements OnInit {
//constructor(private activatedRoute: ActivatedRoute,
// private router: Router,
// private http: HttpClient,
// @Inject('BASE_URL') private baseUrl: string) {}
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
this.dropdownList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
}
onItemSelect(item: any) {
console.log(item);
}
onSelectAll(items: any) {
console.log(items);
}
}但是，当我查看浏览器开发工具时，会发现以下错误。emplate解析错误:无法绑定到“占位符”，因为它不是“ng-multiselect-下拉列表”的已知属性。1.如果占位符是角指令，则将“CommonModule”添加到该组件的“@NgModule.imports”中。2.若要允许任何属性添加“NO_ERRORS_SCHEMA”到此组件的“@NgModule.schemas”，请执行以下操作。无法绑定到“数据”，因为它不是“ng-multiselect-下拉列表”的已知属性。无法绑定到“设置”，因为它不是“ng-多选择-下拉”的已知属性。
该页的html如下-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ng-multiselect-dropdown [placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-07 21:28:41
终于开始工作了。NgMultiSelectDropDownModule模块本身应该被模拟为app.module.ts。ngOnInit()方法应该在component.ts中使用。正如其他人正确指出的那样，组件自己的选择器应该与组件html中使用的ng-multiselect-dropdown选择器不同。
Stack Overflow用户
发布于 2019-01-07 19:42:48
此错误意味着组件的模块没有所需的导入。尝试在此组件的模块文件中导入模块。
Stack Overflow用户
发布于 2019-01-07 19:45:38
而不是
[placeholder]="'custom placeholder'"使用
[value]="custom placeholder"当然，检查模块中的导入是否以正确的方式完成
但是，我检查了正式文档，您可以绑定占位符属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54080704
复制相关文章
相似问题
腾讯云开发者
