首页 > 解决方案 > 无法绑定到“menuList”,因为它不是“树视图”的已知属性

问题描述

我正在尝试实现下面链接中提到的代码

https://www.c-sharpcorner.com/article/recursive-tree-view-using-angular-2-and-typescript-till-nth-level-depth/

我对以下日志感到震惊。

An unhandled exception occurred while processing the request.
NodeInvocationException: Template parse errors:
Can't bind to 'menuList' since it isn't a known property of 'tree-view'.
1. If 'tree-view' is an Angular component and it has 'menuList' input, then verify that it is part of this module.
2. If 'tree-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<tree-view [ERROR ->][menuList]="menuList"></tree-view>"): ng:///AppModuleShared/TreeViewComponent.html@0:11
'tree-view' is not a known element:
1. If 'tree-view' is an Angular component, then verify that it is part of this module.
2. If 'tree-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<tree-view [menuList]="menuList"></tree-view>"): ng:///AppModuleShared/TreeViewComponent.html@0:0
Error: Template parse errors:
Can't bind to 'menuList' since it isn't a known property of 'tree-view'.
1. If 'tree-view' is an Angular component and it has 'menuList' input, then verify that it is part of this module.
2. If 'tree-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<tree-view [ERROR ->][menuList]="menuList"></tree-view>"): ng:///AppModuleShared/TreeViewComponent.html@0:11
'tree-view' is not a known element:
1. If 'tree-view' is an Angular component, then verify that it is part of this module.
2. If 'tree-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<tree-view [menuList]="menuList"></tree-view>"): ng:///AppModuleShared/TreeViewComponent.html@0:0

编辑

下面是我为 TreeViewComponent 实现的代码

import { Component } from '@angular/core';
import { TreeView } from './tree-view.directive';
import { ProjectRoleService } from './project-role.service';

@Component({
    selector: 'tree-view-menu',
    template: '<tree-view [menuList]="menuList"></tree-view>',
    styleUrls: ['./tree-view.css']
})
export class TreeViewComponent {
    public roleName: string = 'Admin';
    menuList: any;
    constructor(private _projectService: ProjectRoleService) {
    }
    ngOnInit() {
        this.roleName = "Admin";
        this._projectService.getMenuDetails(this.roleName).then((res: any) => {
            this.menuList = res;
        }, (error) => {
            throw new Error('This request has failed ' + Response.error);
        });
    }
} 

下面是 app.shared.module.ts 的代码。请在下面找到它。我删除了一些非常常见的导入。

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { TreeViewMenuComponent } from './components/treeview/tree-view-menu.component';
import { TreeView } from './components/treeview/tree-view.directive';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        TreeViewMenuComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'tree-view-menu', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'tree-view-menu', component: TreeViewMenuComponent },
            { path: '**', redirectTo: 'tree-view-menu' }
        ])
    ]
})
export class AppModuleShared {
}

这有什么线索吗?

标签: c#angularasp.net-core

解决方案


推荐阅读