Question

我正在尝试在另一个组件/页面中使用ng-multiselect-dropdown组件（即通过app.mudule.ts中的RouterModule.forRoot注册）。我已按照此link-

的建议将其导入到组件中

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.如果'placeholder'是Angular指令，则将'CommonModule'添加到该组件的'@ NgModule.imports'中。 2.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。无法绑定到“数据”，因为它不是“ 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>

Answer 1

此错误意味着组件的模块没有必需的导入。尝试将模块导入此组件的模块文件中。

Answer 2

代替

[placeholder]="'custom placeholder'"

使用

[value]="custom placeholder"

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

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

Answer 3

最后使它起作用。 NgMultiSelectDropDownModule 模块本身应附加到app.module.ts。 ngOnInit（）方法应在component.ts内部使用。正如其他人正确指出的那样，组件自己的选择器应与组件html中使用的 ng-multiselect-dropdown 选择器不同。

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

3 个答案: