特定跨度的角度切换颜色

Question

我有一个mat-table，我用它来动态添加列和填充。此表的标题由多个div 和跨度组成，以专门设置它们的格式。当我单击标题时，我希望它的颜色更改为黑色，但是当我单击另一个标题时，我希望恢复以前的标题，而新的标题改变颜色。

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