在组件中使用 ng-multiselect-dropdown，而不是 app.module.ts

我正在尝试在另一个组件/页面中使用ng-multiselect-dropdown组件（即通过app.mudule.ts中的RouterModule.forRoot注册）。我已经按照此链接中的建议将其导入到我的组件中-

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);
}
}

但是当我查看浏览器开发人员工具时，我收到以下错误。铭牌解析错误：无法绑定到"占位符"，因为它不是"ng-multiselect-dropdown"的已知属性。1. 如果"占位符"是 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>

此错误

意味着组件的模块没有所需的导入。尝试在此组件的模块文件中导入模块。

而不是

[placeholder]="'custom placeholder'"

用

[value]="custom placeholder"

当然，检查模块中的导入是否正确

但是我检查了官方文档，您可以绑定占位符属性

终于让它工作了。NgMultiSelectDropDownModule 模块本身应该被输入到 app.module.ts。ngOnInit（） 方法应该在 component.ts 中使用。正如其他人正确指出的那样，组件自己的选择器应该与组件 html 中使用的 ng-multiselect-dropdown 选择器不同。

相关内容

最新更新

热门标签：