angular2 中的树

Question

我正在做一个 angular2 项目和primeng，我的问题是primeng 中的树在我使用它时给了我错误。 我执行了npm install primeng --save 我导入了import {TreeModule,TreeNode} from 'primeng/primeng'; 当我输入<p-tree></p-tree> 时出现以下错误：

NodeInvocationException：模板解析错误：无法绑定到“值” 因为它不是“p-tree”的已知属性。 1. 如果'p-tree'是一个Angular组件并且它有'value'输入，那么验证它是这个模块的一部分。

这是我的 NgModule：app.module.shared.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router';

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 { UsersService } from "./services/users.service";
import {LoginComponent} from "./components/login/login.component";
import {HTTP_INTERCEPTORS, HttpClient, HttpClientJsonpModule, HttpClientModule} from "@angular/common/http";
import {AuthInterceptorService} from "./services/authinterceptor.service";
import {CustomersService} from "./services/customers.service";
import {StorageService} from "./services/storage.service";
import {ProductsService} from "./services/products.service";
import {UsersComponent} from "./components/_User/users/users.component";
import {AddUserComponent} from "./components/_User/add_user/add_user.component";
import {UserComponent} from "./components/_User/user/user.component";
import {CustomersComponent} from "./components/Customer/customers/customers.component";
import {ProductsComponent} from "./components/Product/products/products.component";
import {AddRoleComponent} from "./components/_User/add_role/add_role.component";
import {AddCustomerGroupComponent} from "./components/Customer/add_customer_group/add_customer_group.component";
import {AddProductComponent} from "./components/Product/add_product/add_product.component";
import {EditProductComponent} from "./components/Product/edit_product/edit_product.component";
import {AddRankComponent} from "./components/Customer/add_rank/add_rank.component";

import {EditCustomerComponent} from "./components/Customer/edit_add_customer/edit_cusotmer.component";
import {ProductTreeComponent} from "./components/Product/products_tree/product_tree.component";
import {TreeModule ,SharedModule } from 'primeng/primeng';


@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        FetchDataComponent,
        HomeComponent,
        UsersComponent,
        UserComponent, 
        AddUserComponent,
        LoginComponent,
        CustomersComponent,
        ProductsComponent,
        AddRoleComponent,
        AddCustomerGroupComponent,
        AddProductComponent,
        EditProductComponent,
        AddRankComponent,
        EditCustomerComponent,
        ProductTreeComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        TreeModule,
        SharedModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'users', component: UsersComponent },
            { path : 'user', component: UserComponent },
            { path : 'login', component: LoginComponent },
            { path : 'adduser', component: AddUserComponent },
            { path : 'customers', component: CustomersComponent },
            { path : 'addcustomer', component: EditCustomerComponent },
            { path : 'editcustomer/:id', component: EditCustomerComponent },
            { path : 'products', component: ProductsComponent},
            { path : 'addrole', component: AddRoleComponent},
            { path : 'addcustomergroup', component: AddCustomerGroupComponent},
            { path : 'addproduct', component: AddProductComponent},
            { path : 'editproduct', component: EditProductComponent},
            { path : 'addrank', component: AddRankComponent},
            { path : 'products_tree', component: ProductTreeComponent}





            //{ path: '**', redirectTo: 'home' }
        ], { useHash: true })
    ], 
    providers : [
        UsersService,
        HttpClient,
        CustomersService,
        StorageService,
        ProductsService,
        { provide : HTTP_INTERCEPTORS , useClass : AuthInterceptorService, multi: true}
        ]
})


export class AppModuleShared {
}

Answer 1

在 app.module.ts 中添加相同的内容

import {TreeModule} from 'primeng/primeng';

@NgModule({
    imports:      [
        TreeModule,
],
});

Answer 2

Check the your package.json "primeng": "^4.3.0",

add the Import statement in app.module.ts

import {TreeModule} from 'primeng/primeng';
-------------------------------------------
Add TreeModule class imports section in app.module.ts

    imports:      [
            TreeModule,
    ],


In your component.ts file add following  line

    import { TreeNode } from 'primeng/primeng';


Declare the variables like that

nodes: TreeNode[];
selectedNode: TreeNode;

component.html 

<p-tree [value]="nodes">
   <ng-template let-node pTemplate="default">
        <p>
             {{node.label}}
        </p>
    </ng-template>
</p-tree>
See the example
[https://stackblitz.com/edit/primeng-xzmmf9][1]