无法绑定到“占位符"，因为它不是“ng-multiselect-dropdown"的已知属性 [英] Can't bind to 'placeholder' since it isn't a known property of 'ng-multiselect-dropdown'

问题描述

我想实现自动完成功能，所以我发现一个相同的选项是使用多选下拉菜单.所以我使用了这个模块 -

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

但是在同样实施之后，我得到了这些错误 -

错误 -

ERROR 错误:未捕获(承诺):错误:模板解析错误:无法绑定到占位符"，因为它不是ng-"的已知属性多选下拉".1.如果'placeholder'是一个Angular指令，那么添加'CommonModule'到此组件的@NgModule.imports".2.要允许任何属性添加'NO_ERRORS_SCHEMA'到此组件的@NgModule.schemas".("<ng-多选下拉菜单[错误 ->][占位符]="'自定义占位符'"[数据]="下拉列表"[(ngModel)]="selectedItems""): ng:///AdminLayoutModule/HierarchySearchComponent.html@7:0

当我在 component.html 中注释占位符时，出现此错误 -

无法绑定到data"，因为它不是ng-"的已知属性多选下拉".1. 如果 'data' 是一个 Angular 指令，那么将 'CommonModule' 添加到此组件的@NgModule.imports".2.要允许任何属性添加'NO_ERRORS_SCHEMA'到此组件的@NgModule.schemas"."<ng-多选下拉菜单[占位符]="'自定义占位符'"[错误 ->][数据]="下拉列表"[(ngModel)]="selectedItems"[设置]="下拉设置""): ng:///AdminLayoutModule/HierarchySearchComponent.html@8:2

并且类似的错误一直持续到最后一个属性.

更新

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-b​​rowser/animations';从'@angular/core' 导入 { NgModule };从'@angular/forms'导入{FormsModule}；从'@angular/http'导入{HttpModule}；从 '@angular/router' 导入 { RouterModule };从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；import { AppRoutingModule } from './app.routing';import { ComponentsModule } from './components/components.module';从 './app.component' 导入 { AppComponent };从'./layouts/admin-layout/admin-layout.component'导入{AdminLayoutComponent}；//------------- 导入模块-------------------------从 'ng-multiselect-dropdown' 导入 { NgMultiSelectDropDownModule };从'@angular/common'导入{CommonModule}；@NgModule({进口:[浏览器动画模块，表单模块，Http模块，组件模块，路由器模块，应用路由模块，NgbModule.forRoot(),NgMultiSelectDropDownModule.forRoot(),通用模块，],声明: [应用组件，AdminLayoutComponent,],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

解决方案

HierarchySearchComponent - 这是您使用 ng-multiselect-dropdown 的组件.

所以你可能会有 HierarchySearch.module.ts.

您只需从 app.module.ts 中的导入:[] 中删除 NgMultiSelectDropDownModule.forRoot() 并在 HierarchySearch.module.ts 中导入即可.

它会起作用.

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 { }

解决方案

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.!

这篇关于无法绑定到“占位符"，因为它不是“ng-multiselect-dropdown"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！