Я пытаюсь использовать компонент ng-multiselect-dropdown в другом компоненте / странице (то есть зарегистрированным через 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 parse errors:
Невозможно связать с 'placeholder', так как это не известное свойство 'ng-multiselect-dropdown'.
1. Если placeholder является Angular-директивой, добавьте CommonModule к @ NgModule.imports этого компонента.
2. Чтобы разрешить любое свойство, добавьте «NO_ERRORS_SCHEMA» к «@ NgModule.schemas» этого компонента.
Невозможно привязать к «данным», так как это не известное свойство «ng-multiselect-dropdown».
Невозможно выполнить привязку к «настройкам», поскольку это не известное свойство «ng-multiselect-dropdown».
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>