我正在Angular中开发一个Web应用程序。我在页面中有一个树组件。我有动态选项卡和内容作为树节点。我正在努力区分节点。下面是动态制表符和树的代码。
下面是打字稿代码:
this.arrayTabs.forEach(eachObj => {
this.tabs.push({
title: eachObj,
active: false,
content: this.nodes
});
})
下面是html代码:
<tabset>
<tab *ngFor="let tabz of tabs" [heading]="tabz.title">
<div *ngIf="tabz.title==='Edit'">
<tree-root #tree
[nodes]="tabz.content"
[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;
}
}
之所以发生这种情况,是因为当我执行node.data.checked=true
或false
时,所有节点都在更新。有什么办法可以防止这种情况?理想情况下,每个选项卡的节点应该不同。我遵循的方法是正确的还是应该更改实现?