PrimeNG p-tree error: Can't bind to 'value' since it isn't a known property of 'p-tree'
PrimeNG p-tree error: Can't bind to 'value' since it isn't a known property of 'p-tree'
我在我的 Angular2 网络应用程序中使用 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>)
我找到了类似的thred,但找不到好的解决方案。
你能帮助我吗?
非常感谢。
已解决
我在正确的文件中解决了移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此它需要将导入文件放在这里而不是 app.module 文件中。
请务必在您的组件中导入 Tree
。
示例:
import { Tree, TreeNode } from 'primeng/primeng';
已解决
我在正确的文件中解决了移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此它需要将导入文件放在这里而不是 app.module 文件中。
更新
在最新版本的Primeng和Angular中,导入应该是这样的-
import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';
更多信息详见-
我在我的 Angular2 网络应用程序中使用 PrimeNG,我想使用 p-tree 组件。 我在 app.module:
中导入了 TreeModuleimport { 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>)
我找到了类似的thred,但找不到好的解决方案。 你能帮助我吗? 非常感谢。
已解决
我在正确的文件中解决了移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此它需要将导入文件放在这里而不是 app.module 文件中。
请务必在您的组件中导入 Tree
。
示例:
import { Tree, TreeNode } from 'primeng/primeng';
已解决
我在正确的文件中解决了移动导入问题。我的应用程序有一个用于导入模块的自定义文件,因此它需要将导入文件放在这里而不是 app.module 文件中。
更新
在最新版本的Primeng和Angular中,导入应该是这样的-
import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';
更多信息详见-