【问题标题】:Can't bind to 'placeholder' since it isn't a known property of 'ng-multiselect-dropdown'无法绑定到“占位符”,因为它不是“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-b​​rowser' 导入 { BrowserModule },如您的 app.module.ts 中所见,您没有导入通用模块,这些模块对于在功能模块和 BrowserModule 提供启动和运行浏览器应用程序所必需的服务
  • 你的component.htmlcomponent.module.ts 吗??

标签: angular angular2-services angular2-directives


【解决方案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';

          【讨论】:

            猜你喜欢
            • 2021-09-15
            • 1970-01-01
            • 1970-01-01
            • 2021-06-16
            • 2021-03-20
            • 2018-02-12
            • 2021-10-24
            • 2018-08-29
            • 1970-01-01
            相关资源
            最近更新 更多