Javascript 特定跨度的角度切换颜色

我有一个mat表，动态地向其中添加列并填充。此表的标题由几个div和span组成，用于对其进行专门的格式化。单击某个标题时，我希望其颜色更改为黑色，但单击另一个标题时，我希望上一个标题还原，新标题更改颜色

目前，我可以让它切换一个标题，但不知道如何使它不切换另一个标题。早些时候，我遇到了一个问题，如果单击一个跨距，我会切换所有跨距。我修复了这个问题，只根据其ID切换跨度

以下是我到目前为止在HTML中看到的内容：

<table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="{{column.columnName1}}" *ngFor = "let column of displayColumns">
          <th mat-header-cell *matHeaderCellDef>
            <div *ngIf = "column.stackedHeader">
              <div [ngStyle] = "{'color': (column.toggled) ? 'black' : 'grey'}" (click) = "toggleColumn($event)" class = "column-header" id = "{{column.columnName1}}">
                {{ column.columnHeader1 }}
              </div>
              <div (click) = "toggleColumn($event)" class = "column-header" id = "{{column.columnName2}}">
                {{ column.columnHeader2 }}
              </div>
            </div>
            <div *ngIf = "!column.stackedHeader" (click) = "toggleLocationColumn($event)" class = "column-header" id = "{{column.columnName1}}">
              {{column.columnHeader1}}
            </div>
          </th>

---

很难看出全局，有些部分丢失了，但下面是一些重构建议，以使代码不那么容易出错

在模板中定义单击处理程序时，不必传递

$event

，您可以传递模板中定义的任何变量

因此，您不会收到DOM元素，而是收到实际的业务对象。这也让您可以使用类型。这样，在单击的DOM元素上也不需要

id

。

toggleColumn

有点复杂。 首先，

for-i

非常容易出错，您应该使用

forEach

，并且由于数组引用较少，因此代码更可读。我重写了这样的方法：

toggleColumn（selectedColumn:Column）{
this.columntogled.emit（$event）；
this.displayColumns.forEach（（其他列：列）=>{
otherColumn.toggled=otherColumn.id==selectedColumn.id；
});
}

现在我想，您的问题可能是您只更改所选列的

toggled

字段，而不是其他字段，请参见

if

标准：

---

for（让i=0；i很难看出全局，有些部分缺失，但下面是一些重构建议，以减少代码出错的可能性

在模板中定义单击处理程序时，不必传递
$event
，您可以传递模板中定义的任何变量



因此，您不会收到DOM元素，而是实际的业务对象。这也让您可以使用类型。这样，您也不需要单击的DOM元素上的
id
。
toggleColumn
有点复杂。
首先，
for-i
非常容易出错，您应该使用
forEach
，并且由于数组引用较少，因此代码更可读。我重写了如下方法：

toggleColumn（selectedColumn:Column）{
this.columntogled.emit（$event）；
this.displayColumns.forEach（（其他列：列）=>{
otherColumn.toggled=otherColumn.id==selectedColumn.id；
});
}

现在我想，您的问题可能是您只更改所选列的
toggled
字段，而不是其他字段，请参见
if
标准：

用于（让我=0；我非常感谢！你关于
forEach
的说法是对的，我只是有一个习惯使用
for-i
。在函数调用中，我最终将对象传递给函数，并设置所有
列。将
切换为
false
，然后在设置
selectedColumn.将
切换为
true
。非常感谢！你做得很好t关于
forEach
，我只是习惯于使用
for-i
。在函数调用中，我最终将对象传递给函数并设置所有
列。将
切换为
false
，然后在设置
selectedColumn之后，将
切换为
true
。
toggleColumn($event) {
    const columnId = $event.toElement.id;
    this.columnToggled.emit($event);
    for (let i = 0; i <= this.displayColumns.length; i++) {
      if (columnId === this.displayColumns[i].columnName1) {
        this.displayColumns[i].toggled = !this.displayColumns[i].toggled;
      }
    }
  }


[{
    columnName1: 'Pickup',
    columnHeader1: 'Pickup',
    columnName2: 'Delivery',
    columnHeader2: 'Delivery',
    stackedHeader: true,
    stackedRow: true,
    toggled: false
  },
  {
    columnName1: 'FromCity',
    columnHeader1: 'From',
    columnName2: 'ToCity',
    columnHeader2: 'To',
    stackedHeader: true,
    stackedRow: true,
    toggled: false
  }]