Угловая компонента дерева несколько узлов не обновляется

Question

Привет. Я занимаюсь разработкой веб-приложения на Angular 5. Я занимаюсь разработкой компонента дерева. У меня есть три компонента дерева, как показано ниже. У меня есть три вкладки добавить, удалить и редактировать. Каждая вкладка имеет отдельные узлы. Для добавления у меня есть nodeadd, для удаления у меня есть nodedelete.

                                    <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;

это значения по умолчанию при отображении дерева. Я также добавил сюда изображение.

Например, всякий раз, когда я нажимаю на флажок любого узла на вкладке добавления, будет установлен даже флажок на вкладке удаления. Я хочу предотвратить это. Всякий раз, когда я нажимаю на галочку добавления или удаления или редактирования узла, он не должен отражаться на другой вкладке. Могу ли я знать, что мне не хватает? Может кто-нибудь помочь мне разобраться в проблеме? Любая помощь будет оценена. Спасибо.