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

【问题标题】：Use ng-multiselect-dropdown in a component instead of app.module.ts在组件中使用 ng-multiselect-dropdown 而不是 app.module.ts
【发布时间】：2019-06-02 11:46:38
【问题描述】：

我正在尝试在另一个组件/页面中使用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. 要允许任何属性，请将“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>

【问题讨论】：

我想你可以在这里找到答案link
我已经尝试了上面的链接，这是我收到错误的地方
您将自己的选择器定义为“ng-multiselect-dropdown”看起来是错误的，使其“覆盖”导入的选择器。尝试将其重命名为例如@Component({ selector: "my-dropdown", templateUrl: "./multiselect.component.html" })
那么，我应该删除行 - 选择器：“ng-multiselect-dropdown”吗？
如果你只是重命名它会发生什么？看起来您正在尝试构建自己的角度组件，因此您很可能需要一个选择器（具有您自己定义的名称）

标签： node.js angular asp.net-core

【解决方案1】：

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

【讨论】：

只是为了确保这不是错误导入的问题，删除[placeholder]="'custom placeholder'"并检查是否显示默认值Select。
它不仅仅是占位符，它对其他属性（如数据、设置等）显示相同的错误。我认为导入应该有问题。

【解决方案2】：

代替

[placeholder]="'custom placeholder'"

使用

[value]="custom placeholder"

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

不过我查了官方文档，可以绑定占位符属性

【讨论】：

现在它显示“无法绑定到‘值’，因为它不是‘ng-multiselect-dropdown’的已知属性
这是错误的，如果您跳过 ' 那么 Angular 将尝试将“自定义占位符”评估为 en 表达式，期望 MultiSelectComponent 类具有具有该名称的属性。此外，ng-multiselect-dropdown 没有名为“value”的属性
是的，我只是在我的 mac 上尝试，多选器一般没有值和占位符

【解决方案3】：

终于搞定了。 NgMultiSelectDropDownModule 模块本身应该被移植到 app.module.ts。 ngOnInit() 方法应该在 component.ts 中使用。正如其他人正确指出的那样，组件自己的选择器应该与组件html中使用的 ng-multiselect-dropdown 选择器不同。

【讨论】：