以下是一个使用Angular Material表格的示例,动态应用背景颜色到行。
npm install @angular/material @angular/cdk
import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
imports: [
MatTableModule,
MatIconModule,
MatSortModule,
MatPaginatorModule
],
declarations: [YourComponent]
})
export class YourModule { }
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'your-component',
templateUrl: 'your-component.html',
styleUrls: ['your-component.css']
})
export class YourComponent {
dataSource = new MatTableDataSource(YOUR_DATA); // 替换YOUR_DATA为你的实际数据
displayedColumns = ['name', 'age', 'color'];
applyBackground(row: YourData) {
return row.color === 'red' ? 'red' : 'white'; // 根据你的条件返回相应的背景颜色
}
}
Name
{{row.name}}
Age
{{row.age}}
Color
{{row.color}}
在上面的代码中,我们使用[style.background-color]
绑定了applyBackground()
方法返回的背景颜色到行的背景样式上。
这是一个基本的示例,你可以根据你的需求进行修改和扩展。