PrimeNG p-tree错误:无法绑定到'value',因为它不是'p-tree'的已知属性

时间:2017-09-06 10:00:32

标签: angular primeng

我在Angular2 webapp中使用PrimeNG,我想使用p-tree组件。 我在app.module中导入了TreeModule:

import { TreeModule } from 'primeng/primeng';
@NgModule({
 imports: [
  TreeModule,
  ...
 ]
})

我的组件是:

import { TreeNode } from 'primeng/primeng';
...
export class MyComponent implements OnInit {
 treeNode: TreeNode[];
 ngOnInit() {
  //Simple value for test p-tree
  this.treeNode = [
      {
        "label": "Documents: " + this.doc,
      },
      {
        "label": "Documents: " + this.doc,
        "children": [{
                    "label": "Work",
                },
                {
                    "label": "Home",
                }]
      }
    ]
 }
}

最后在html:

<p-tree [value]="treeNode"></p-tree>

错误是:

zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'p-tree'.
1. If 'p-tree' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-tree' 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. (<p-tree [ERROR ->][value]="treeNode"></p-tree>)

'p-tree' is not a known element:
1. If 'p-tree' is an Angular component, then verify that it is part of this module.
2. If 'p-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (
    [ERROR ->]<p-tree [value]="treeNode"></p-tree>
)
 Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'p-tree'.
1. If 'p-tree' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-tree' 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. (<p-tree [ERROR ->][value]="treeNode"></p-tree>)

我发现了类似的东西,但我找不到一个好的解决方案。 你能帮助我吗? 非常感谢。

解决

我解决了在右侧文件中移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此需要在此处输入导入而不是在app.module文件中。

3 个答案:

答案 0 :(得分:1)

请务必在组件中导入Tree。 例如:

import { Tree, TreeNode } from 'primeng/primeng';

答案 1 :(得分:0)

<强>解决

我解决了在右侧文件中移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此需要在此处输入导入而不是在app.module文件中。

答案 2 :(得分:0)

更新

在最新版本的Primeng和Angular中,导入应如下所示-

import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';

有关详细信息,请参阅-