html - Kan inte binda till 'configuration' eftersom det inte är en känd egenskap hos 'ng-material-multilevel-menu'

Jag använder ng-material-multilevel-menu-plugin för att skapa en flernivå-dropdown. Jag följer den här artikeln, men får följande körtidsfel

Kan inte binda till 'configuration' eftersom det inte är en känd egenskap hos 'ng-material-multilevel-menu'. 1. Om 'configuration' är en Angular-direktiv, lägg till 'CommonModule' i '@NgModule.imports' för denna komponent. 2. För att tillåta vilken egenskap som helst, lägg till 'NO_ERRORS_SCHEMA' i '@NgModule.schemas' för denna komponent.

Kan inte binda till 'items' eftersom det inte är en känd egenskap hos 'ng-material-multilevel-menu'. 1. Om 'items' är en Angular-direktiv, lägg till 'CommonModule' i '@NgModule.imports' för denna komponent. 2. För att tillåta vilken egenskap som helst, lägg till 'NO_ERRORS_SCHEMA' i '@NgModule.schemas' för denna komponent.

'ng-material-multilevel-menu' är inte ett känt element: 1. Om 'ng-material-multilevel-menu' är en Angular-komponent, kontrollera då att den är en del av denna modul. 2. Om 'ng-material-multilevel-menu' är en webbkomponent, lägg till 'CUSTOM_ELEMENTS_SCHEMA' till '@NgModule.schemas' för denna komponent för att undertrycka detta meddelande.

Detta är min kod i .html-fil

 <div>
  <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)">
  </ng-material-multilevel-menu>
 </div>

Detta är min kod i .ts-fil

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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

Hur kan jag lösa detta problem?

Svar #1

Ta bort @NgModule-avsnittet från denna komponentfil. Lägg till NgMaterialMultilevelMenuModule i importsektionen av din app.module.ts-fil.

Och deklarera appitems som en global variabel ovanför konstruktorn som nedan:

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'
                    }
                  ]
                }
              ]
            }
          ]
        },
      ];

    });
}

Svar #2

Först: Använd inte var, använd det bara så här appitems=[...]. För det andra: Du deklarerade inte config-variabeln i din controller. För det tredje: Du behöver lägga till NgMaterialMultilevelMenuModule i AppModule-klassen, inte i den komponent du skapade.

Relaterade artiklar