javascript - 特定跨度的 Angular 切换颜色

Question

我有一个 mat-table，我可以用它动态添加列并填充。该表的标题由几个 div 和 span 组成，以专门格式化它们。当我单击一个标题时，我希望其颜色更改为黑色，但是当我单击另一个标题时，我希望恢复前一个标题并更改新标题的颜色。

目前，我可以让它切换一个 header ，但不知道如何让它取消切换另一个 header 。早些时候，我遇到了一个问题，如果我单击一个跨度，我就会切换所有跨度。我通过仅根据 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>

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
  }]

Answer 1

很难看到全局，有些部分缺失，但这里有一些重构建议，可以使代码不易出错。

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

<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="{{column.columnName1}}" *ngFor = "let column of displayColumns">
        <!-- ... -->
            <!-- see the toggleColumn call below, and the missing `id` attribute -->
            <div ... (click) = "toggleColumn(column)" class = "column-header" >
        <!-- ... -->

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

toggleColumn(selectedColumn: Column) {
    this.columnToggled.emit($event);
    this.displayColumns.forEach((otherColumn: Column) => {
        otherColumn.toggled = otherColumn.id === selectedColumn.id;
    });
  }

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

for (let i = 0; i <= this.displayColumns.length; i++) {
    if (columnId === this.displayColumns[i].columnName1) {
        this.displayColumns[i].toggled = !this.displayColumns[i].toggled;
    }
}

最简单的解决方案可能是从上面的语句中删除 if，并否定所有列上的 toggled。