角树组件多个节点未更新

时间:2018-09-13 11:32:35

标签: typescript angular5

嗨,我正在用角度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;

这些是显示树时的默认值。我也在这里添加了图片。

enter image description here

例如,每当我单击添加选项卡上任何节点的复选框时,即使删除选项卡中的复选框也将被选中。我想防止这种情况。每当我单击添加或删除或编辑节点的checkox时,它都不应反映在其他选项卡上。我可以知道我在想什么吗?谁能帮我解决问题?任何帮助,将不胜感激。谢谢。

0 个答案:

没有答案