在mat-select中选择mat-option会从另一个HTML元素中删除样式

Question

我有一棵垫子树，当它是“根元素”（单击以展开树的按钮）时，单击时它具有背景色（带有event.target.style.backgroundColor），并将其删除当通过检测元素是否已经具有颜色再次单击时 （如果（event.target.style.backgroundColor ===“浅灰色”）...）。

在组件的另一部分，我有一个包含mat-select元素的mat-table，单击它们的选项不会引起任何问题。但是我有一个特定的垫选择，它位于表的外部，当单击时，尽管没有触发负责该功能的功能，但单击它仍删除了我的背景色...这对我来说是个问题，因为此背景色检测也有帮助我还有其他动作。

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree" #tableTree>

            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                <li class="mat-tree-node">
                    <button id={{node.GUID}} mat-button style="cursor: pointer"  (click)="treeNodesClassAdd(node.GUID); createdDisplayedColumns(node.GUID); retrieveSelectedTableData(node.GUID)">
                        {{node.name}}
                    </button>
                </li>
            </mat-tree-node>

            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
            <li>
                <div style="text-align: middle" class="special-div"  id="divId" (click)="listClassAdd_deselectTreeNodes($event,6)  " matRipple matTreeNodeToggle>
                    {{node.name}}
                </div>
                <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
                    <ng-container matTreeNodeOutlet></ng-container>
                </ul>
            </li>
            </mat-nested-tree-node>
        </mat-tree>

垫子树在垫子卡中

<div class="listsContainer" *ngIf="otherVariables.chosenOption != 6 && otherVariables.chosenOption != undefined" >
    <mat-list role="list" *ngFor="let element of lists[otherVariables.chosenOption]; let i=index">
        <div class="selectionItems">
            <mat-list-item role="listitem" (dblclick)="goToModification(i)">{{element.name}}</mat-list-item>
        </div>
    </mat-list>
</div>

有问题的mat-select本身就位于卡的外部。

我尝试将mat-card和mat-tree放在div中，但无济于事。

不要犹豫告诉我，看看代码的任何其他部分是否有帮助。