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

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

无法绑定到“项目”,因为它不是“ng-material-multilevel-menu”的已知属性。 1.如果'items'是一个Angular指令,那么在这个组件的'@NgModule.imports'中添加'CommonModule'。 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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

我该如何解决这个问题?

#1楼 票数: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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

#2楼 票数:1 已采纳

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

#3楼 票数:0

只需在您的 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
};

  ask by R15 translate from so

未解决问题?本站智能推荐:

1回复

Angular9-MatDatePicker:无法绑定到“ngModel”,因为它不是“input”的已知属性

我已经查看了一些关于此的其他帖子,但在使用 matdatepicker 实现 ngmodel 绑定时仍然遇到问题。 我的 HTML: <mat-form-field> <mat-label>Start Date</mat-label> <i
1回复

Angular 8 mat-autocomplete 错误 - 'matAutocomplete',因为它不是 'input' 的已知属性

我试着去使用的例子在这里从materialUI与角8个工作垫子芯片列表工作正常,没有垫自动完成,但我需要它。 这是我的代码: 我收到这个错误: 我不明白为什么我会收到这个错误:(
2回复

角度材料表:无法绑定到“matRowDefColumn”

我正在尝试使用 Angular Material 表。 我导入了模块,但出现模板解析错误。 HTML: 组件中的导入: 数据源:我使用returnDeadProjectList()作为 Observable 返回一个数组 从 app.module.ts 导入: 我得到的错误是:
1回复

无法绑定到“matDatepicker”,因为它不是“input”的已知属性

我将使用材料日期选择器控制器。 但它显示一个错误。 当然,我在 app.module.ts 文件中添加了 MatDatepickerModule。 让我在这里向您展示我的代码的一些部分: 这是html代码: 以下是错误日志: 我错过了什么?
3回复

Angular 中的对话框未显示模板

我遵循了 Angular Tour of Heroes 教程: https : //angular.io/tutorial ,我想尝试添加一个按钮来触发仪表板上的对话框( https://material.angular.io/components/dialog/overview ) . 但是,当我
2回复

如何在 Angular 中定位材质菜单?

我的顶部导航栏的右上角有一个按钮。 该按钮只是打开一个垫子菜单。 我想在特定位置打开那个垫子菜单,比如在屏幕中间,我该怎么做? 我已经在menuOpened()和按钮的onClick()方法中尝试了下面的这段代码,但似乎没有任何效果,当我打开 mat 菜单时,顶部、高度、宽度等都被覆盖了。
1回复

Angular Material 和输入类型“时间”、值属性与 ngModel

我正在尝试将传入的日期对象拆分为 2 个单独的 mat-form-fields。 首先我创建 DatePicker 并给它正确的默认值: 当我到达时间元素时,它变得有点棘手。 角材料似乎没有处理时间的方法。 这意味着我必须恢复到较旧的方法,只需为我的输入字段指定 type="time"。 在视
1回复

错误:无法绑定到“ dataSource”,因为它不是“ mat-tree”的已知属性

我添加了从https://material.angular.io/components/tree/overview中检索到的示例(该示例可以在[ https://stackblitz.com/angular/arbvompqpmg?file=main.ts]中看到)文档中它抛出此错误: