无法绑定到“配置”，因为它不是“ng-material-multilevel-menu”的已知属性

Question

我正在使用ng-material-multilevel-menu 插件来创建多级下拉菜单。我正在关注this 文章，但遇到运行时错误

无法绑定到“配置” 因为它不是“ng-material-multilevel-menu”的已知属性。 1. 如果 'configuration' 是 Angular 指令，则将 'CommonModule' 添加到该组件的 '@NgModule.imports' 中。 2. 要允许任何属性添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。

无法绑定到“项目”，因为它不是 'ng-material-multilevel-menu'。 1. 如果 'items' 是 Angular 指令，则将 'CommonModule' 添加到该组件的 '@NgModule.imports' 中。 2. 要允许任何属性添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。

'ng-material-multilevel-menu' 不是已知元素： 1. 如果 'ng-material-multilevel-menu' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“ng-material-multilevel-menu”是一个 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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

我该如何解决这个问题？

Answer 1

只需在 ProductsComponent 中定义配置：

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

Answer 2

从此组件文件中删除@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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

Answer 3

第一：不要使用var，像这样使用appitems=[...] 第二：您没有在控制器中声明配置变量。 第三：您需要在AppModule类中添加NgMaterialMultilevelMenuModule，而不是在您创建的组件中。