嗨,我正在用角度5开发Web应用程序。我正在开发树组件。我有以下三个树组件。我有三个选项卡添加,删除和编辑。每个选项卡具有单独的节点。对于添加我有nodesadd,对于删除我有nodesdelete。
<div *ngIf="tabz.title ==='Add'">
<tree-root #tree
[nodes]="nodesAdd"
[options]="options">
<ng-template #treeNodeTemplate let-node="node" let-index="index">
<input type="checkbox" (change)="toggle($event.target,node,tabz.title)"
[checked]="node.data.checked">
{{ node.data.name }}"
</ng-template>
</tree-root>
</div>
<div *ngIf="tabz.title==='Delete'">
<tree-root #tree
[nodes]="nodesDelete"
[options]="options">
<ng-template #treeNodeTemplate let-node="node" let-index="index">
<input type="checkbox" (change)="toggle($event.target,node)"
[checked]="node.data.checked">
{{ node.data.name }}"
</ng-template>
</tree-root>
</div>
<div *ngIf="tabz.title==='Edit'">
<tree-root #tree
[nodes]="nodesEdit"
[options]="options">
<ng-template #treeNodeTemplate let-node="node" let-index="index">
<input type="checkbox" (change)="toggle($event.target,node)"
[checked]="node.data.checked">
{{ node.data.name }}"
</ng-template>
</tree-root>
</div>
</tab>
</tabset>
以上树包含复选框。每当用户单击复选框时,我都会根据以下情况做出是对还是错。
toggle(cb, node,tabtitle) {
if (cb.checked) {
node.data.checked = true;
}
else {
node.data.checked = false;
}
}
使用下面的代码,我向树中添加了不同的节点。
var resultaray = [];
resultaray = [
{
name: 'Info model', checked: false,
children: [
{ name: result[0], checked: false },
{ name: result[1], checked: false }
]
},
{
name: 'Data Access',
children: [
{ name: result[0], checked: false },
{ name: result[1], checked: false }
]
}
];
this.nodes = [
{
name: 'Event Subscriptions', checked: false,
children: [
{ name: 'Variables', checked: false },
{ name: 'Alarms', checked: false },
{ name: 'Events', checked: false },
{ name: 'Platform Events', checked: false }
],
},
{
name: 'Reingestion', checked: false
},
{
name: 'Command', checked: false
},
{
name: 'Type Registry', checked: false,
children: [
{ name: 'Model Definitions', checked: false },
{ name: 'Type Definitions', checked: false }
]
}
];
this.nodesAdd = this.nodes;
this.nodesDelete = this.nodes;
this.nodesEdit = this.nodes;
这些是显示树时的默认值。我也在这里添加了图片。
例如,每当我单击添加选项卡上任何节点的复选框时,即使删除选项卡中的复选框也将被选中。我想防止这种情况。每当我单击添加或删除或编辑节点的checkox时,它都不应反映在其他选项卡上。我可以知道我在想什么吗?谁能帮我解决问题?任何帮助,将不胜感激。谢谢。