我正在使用ng-material-multilevel-menu插件创建多级下拉列表。我正在关注这篇文章，但在运行时出现错误
无法绑定到"configuration"因为它不是"ng材质多级菜单"的已知属性。1.如果"configuration"是Angular指令，则将"CommonModule"添加到此组件的"@NgModule.imports"中。2.若要允许任何属性，请将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas"中。
无法绑定到"items"，因为它不是的已知属性"ng材质多级菜单"。1.如果"items"是Angular指令，则将"CommonModule"添加到此组件的"@NgModule.imports"中。2.若要允许任何属性，请将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas"中。
"ng material多级菜单"不是已知元素：1.如果"ng material multi-level menu"是Angular组件，则验证它是否是该模块的一部分。2.如果"ng material多级菜单"是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的"@NgModule.schemas"中以取消显示此消息。
这是我在.html文件中的代码
<div>
<ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)">
</ng-material-multilevel-menu>
</div>
这是我在.ts文件中的代码
import { Component, OnInit, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
import { AppComponent } from '../app.component';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
@NgModule({
declarations: [
],
imports: [
BrowserModule,
NgMaterialMultilevelMenuModule // Import here
],
providers: [],
bootstrap: [AppComponent]
})
export class ProductsComponent implements OnInit {
constructor(private employeeService: ProductService) {
}
ngOnInit() {
var appitems = [
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor'
}
]
}
]
}
]
},
];
});
}
我该如何解决这个问题？
从此组件文件中删除@NgModule部分。在app.module.ts文件的导入部分添加NgMaterialMultilevelMenuModule。
并在构造函数上方声明appitems为全局变量，如下所示：
export class ProductsComponent implements OnInit {
appitems: any = [];
constructor(private employeeService: ProductService) {
}
ngOnInit() {
this.appitems = [
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor'
}
]
}
]
}
]
},
];
});
}
第一：不要使用var，只需像这样使用appitems=[…]第二：您没有在控制器中声明配置变量。第三：您需要在AppModule类中添加NgMaterialMultilevelMenuModule，而不是在您创建的组件中。
只需在产品组件中定义配置即可：
config = {
paddingAtStart: true,
interfaceWithRoute: true,
classname: 'my-custom-class',
listBackgroundColor: `rgb(208, 241, 239)`,
fontColor: `rgb(8, 54, 71)`,
backgroundColor: `rgb(208, 241, 239)`,
selectedListFontColor: `red`,
highlightOnSelect: true,
collapseOnSelect: true,
rtlLayout: false
};