时间戳

首页 > 解决方案 > 无法绑定到“配置”，因为它不是“ng-material-multilevel-menu”的已知属性

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

问题描述

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

无法绑定到“配置”，因为它不是“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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

我该如何解决这个问题？

标签： htmlangulartypescriptangular-material

解决方案

@NgModule从此组件文件中删除部分。添加文件NgMaterialMultilevelMenuModule的导入部分app.module.ts。

并在构造函数上方声明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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

推荐阅读