要实现Angular 4 Material表格高亮一行并改变选中行的颜色,可以按照以下步骤进行:
npm install @angular/material @angular/cdk
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule,
MatIconModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Name
{{row.name}}
table.mat-table {
width: 100%;
}
td.mat-cell.highlight {
background-color: #ffc107; /* 设置高亮行的背景颜色 */
}
.mat-row.highlight {
background-color: #ffeb3b; /* 设置选中行的背景颜色 */
}
export class AppComponent {
dataSource = [
{name: 'Row 1'},
{name: 'Row 2'},
{name: 'Row 3'}
];
selectedRow: any;
selectRow(row: any) {
this.selectedRow = row;
}
}
以上代码示例中,当用户点击表格的行时,selectRow方法会将选中的行赋值给selectedRow变量,然后使用ngClass绑定样式类来实现高亮选中行的效果。
注意:在Angular 4中,Angular Material的版本可能是2.x.x。所以在安装Angular Material和导入模块时,请根据实际版本进行相应的更改。