单击角度中的任意行时，如何知道表的列名

Question

我正在扭曲角度代码，以便在单击一行时高亮显示该行。但是当一个特定的列(四列中的一列(时，该行不应该高亮显示。所以我想检查生成点击事件的列名，这样我就想高亮显示哇。

请帮帮我。

Answer 1

如果没有任何实际的代码，很难回答这样一个模糊的问题，但基本上就像你所说的那样——如果元素是行，并且点击不在禁止列的列表上，那么就听元素上的点击事件——画行。

@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
bannedColumns = ['cdk-column-weight', 'cdk-column-symbol'];
@HostListener('click', ['$event.target'])
onClick(e: HTMLElement) {
console.log(e);
if (e.getAttribute('role') === 'cell') {
if (e.parentElement?.getAttribute('role') === 'row') {
if (Array.from(e.classList).some((r) => this.bannedColumns.includes(r)) === false) {
console.log('row not banned!');
e.parentElement.style.cssText += 'background-color:yellow';
} else {
console.warn('banned column was clicked');
}
}
}
}
}

工作示例：https://stackblitz.com/edit/angular-amqix9?file=src%2Fapp%2Ftable-基本样本.ts