Can't bind to 'placeholder' since it isn't a known property of 'ng-multiselect-dropdown'

问题

I want to implement autocomplete feature , so an identical option i found was using multi-select drop-down. So i used this module -

https://www.npmjs.com/package/ng-multiselect-dropdown

But after ditto implementing, i get these errors -

Error -

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'ng- 
 multiselect-dropdown'.
1. If 'placeholder' is an Angular directive, then add 'CommonModule' 
 to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the 
'@NgModule.schemas' of this component. ("

<ng-multiselect-dropdown
[ERROR ->][placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
"): ng:///AdminLayoutModule/HierarchySearchComponent.html@7:0

And when i comment placeholder in my component.html, i get this error -

Can't bind to 'data' since it isn't a known property of 'ng- 
multiselect-dropdown'.
1. If 'data' is an Angular directive, then add 'CommonModule' to the 
'@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the 
 '@NgModule.schemas' of this component.
   "
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
  [ERROR ->][data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
"): ng:///AdminLayoutModule/HierarchySearchComponent.html@8:2

And the similar error continues till the last attribute.

Update

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';

import { AppComponent } from './app.component';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

//-------------  Imported Modules -------------------------

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    NgMultiSelectDropDownModule.forRoot(),
    CommonModule,


  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

回答1:

HierarchySearchComponent - This is the component for which you are using ng-multiselect-dropdown.

So probably you would have HierarchySearch.module.ts.

You just remove NgMultiSelectDropDownModule.forRoot() from imports:[] in app.module.ts and import in HierarchySearch.module.ts.

It will work.!

回答2:

Normally, this error occurs when you missed some imports. Please add these line if missing:

import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';

回答3:

Add the multi select import in ComponentsModule where you have all components are imported. It has worked for me.

来源：https://stackoverflow.com/questions/52925489/cant-bind-to-placeholder-since-it-isnt-a-known-property-of-ng-multiselect-d

标签

angular

angular2-services

angular2-directives