无法绑定到“占位符”,因为它不是“ng-multiselect-dropdown”的已知属性
Posted
技术标签:
【中文标题】无法绑定到“占位符”,因为它不是“ng-multiselect-dropdown”的已知属性【英文标题】:Can't bind to 'placeholder' since it isn't a known property of 'ng-multiselect-dropdown' 【发布时间】:2019-03-26 07:13:22 【问题描述】:我想实现自动完成功能,所以我发现一个相同的选项是使用多选下拉菜单。所以我使用了这个模块-
https://www.npmjs.com/package/ng-multiselect-dropdown
但是在同上实施之后,我得到了这些错误 -
错误 -
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
当我在 component.html 中评论占位符时,我得到了这个错误 -
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
并且类似的错误一直持续到最后一个属性。
更新
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
【问题讨论】:
您是否在模块配置中为imports
添加了正确的模块??
是的,我包括==> import NgMultiSelectDropDownModule from 'ng-multiselect-dropdown';在 app.module.ts
但我的意思是模块导入,而不是源文件导入......你最好粘贴 app.module.ts
尝试从 '@angular/platform-browser' 导入 BrowserModule ,如您的 app.module.ts 中所见,您没有导入通用模块,这些模块对于在功能模块和 BrowserModule 提供启动和运行浏览器应用程序所必需的服务
你的component.html
有component.module.ts
吗??
【参考方案1】:
HierarchySearchComponent - 这是您使用的组件ng-multiselect-dropdown
。
所以你可能会有 HierarchySearch.module.ts。
您只需从 app.module.ts 中的 imports:[] 中删除 NgMultiSelectDropDownModule.forRoot() 并在 HierarchySearch.module.ts 中导入。
它会起作用的。!
【讨论】:
能否请您提供一些清晰的示例。是否需要在我的项目中创建 HierarchySearch.module.ts 文件? 嗨,HierarchySearchComponent 是什么意思,你能详细说明一下吗?我也遇到同样的问题 您好,您必须从 app.module.ts 中删除 NgMultiSelectDropDownModule.forRoot(),然后添加: import NgMultiSelectDropDownModule from 'ng-multiselect-dropdown';和 .module.ts 文件中的 NgMultiSelectDropDownModule.forRoot() 导入当前组件。【参考方案2】:在您已导入所有组件的 ComponentsModule 中添加多选导入。它对我有用。
【讨论】:
【参考方案3】:检查你是否被导入你是导入NgMultiSelectDropDownModule到module.ts
import NgMultiSelectDropDownModule from 'ng-multiselect-dropdown';
@NgModule(
imports: [
NgMultiSelectDropDownModule
],
【讨论】:
【参考方案4】:我遇到了这个问题并解决了 添加
import NgMultiSelectDropDownModule from 'ng-multiselect-dropdown';
和
@NgModule(
imports: [
NgMultiSelectDropDownModule
]
)
到 xxxx.module.ts 文件,您的组件被导入到该文件而不是 app.module.ts 文件
【讨论】:
【参考方案5】:我也在使用 angular 7 但我的问题已解决。我只是导入NO_ERRORS_SCHEMA
并包含在同一个模块中,其中ng-multiselect-dropdown
模块包含@NgModule
:
import NgModule ,NO_ERRORS_SCHEMA from '@angular/core';
import FormsModule from '@angular/forms';
@NgModule(
imports: [
CommonModule,
FormsModule,
AngularMultiSelectModule,
],
schemas:[NO_ERRORS_SCHEMA],
)
export class SettingsModule
【讨论】:
【参考方案6】:通常,当您错过一些导入时会发生此错误。如果缺少,请添加以下行:
import BrowserModule from '@angular/platform-browser';
import FormsModule from '@angular/forms';
【讨论】:
以上是关于无法绑定到“占位符”,因为它不是“ng-multiselect-dropdown”的已知属性的主要内容,如果未能解决你的问题,请参考以下文章