要实现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和导入模块时,请根据实际版本进行相应的更改。