个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 22:06:05 24 4
gpt4 key购买 nike

我正在尝试使用 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);
}
}

但是当我查看浏览器开发人员工具时，出现以下错误。模板解析错误:无法绑定(bind)到“占位符”，因为它不是“ng-multiselect-dropdown”的已知属性。1. 如果“placeholder”是 Angular 指令，则将“CommonModule”添加到该组件的“@NgModule.imports”中。2. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。无法绑定(bind)到“data”，因为它不是“ng-multiselect-dropdown”的已知属性。无法绑定(bind)到“设置”，因为它不是“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>

最佳答案

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

关于node.js - 在组件中使用 ng-multiselect-dropdown 而不是 app.module.ts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54080704/

24 4 0
文章推荐： html - 在 IE6/7 中使用 CSS 将表格列中的内容居中
文章推荐： c# - 用于 Sql 查询的 NHibernate 查询
文章推荐： css - 需要帮助使表格符合 W3C
文章推荐： c# - 如何使用 CreateObjectSet 将 TEntity 作为参数？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com