如何使用Angular对Ag-Grid中的行进行着色

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [rowClassRules]="rowClassRules"
></ag-grid-angular>

import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  rowData: any[];
  columnDefs: any[];
  rowClassRules: any;

  constructor() {
    this.rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 }
    ];

    this.columnDefs = [
      { headerName: 'Make', field: 'make' },
      { headerName: 'Model', field: 'model' },
      { headerName: 'Price', field: 'price' }
    ];

    this.rowClassRules = {
      'highlight-red': function(params) {
        return params.data.price > 50000;
      },
      'highlight-green': function(params) {
        return params.data.price <= 50000;
      }
    };
  }
}

.highlight-red {
  background-color: red;
  color: white;
}

.highlight-green {
  background-color: green;
  color: white;
}