Добавить цвет в строке мастер / деталь AgGrid Angular2

Question

Я хочу добавить цвет в первой строке основной детали agGrid в Angular2, но не могу получить

Я добавляю этот getRowClass, но ничего ...

 constructor(private http: HttpClient) {
    this.gridOptions = <GridOptions>{};

        this.columnDefs = [
        {
        headerName: 'Id',
        field: 'Id',
        cellRenderer: 'agGroupCellRenderer'
       }
      ];


  this.rowSelection = 'multiple';

  this.detailCellRendererParams = {
    detailGridOptions: {
      columnDefs: [
        { field: 'Name' },
        { field: 'Surname' },
        { field: 'Age' }
      ],

    onGridReady: function(params) {
        params.api.sizeColumnsToFit();
      }
    },

    getRowClass: function(params) {
        if (params.node.rowIndex === 0) {
            return 'aggrid--red-cell';
         }
    },

    getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
    }
  };

}

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  this.http.get('/api/projects').subscribe(data => {
    params.api.setRowData(data);
    this.rowCounts = params.api.getDisplayedRowCount();
    this.countOnSelectionChanged();
  });

  params.api.sizeColumnsToFit();
  setTimeout(function() {
    params.api.forEachNode(function(node) {
    });
  }, 500);
}

selectAllRows() {
  this.gridOptions.api.selectAll();
}

ngOnInit() {}

Как добавить цвет в первую строку «Имя» в основных деталях?

Я получаю много строк «Dni» и хочу щелкнуть по одному «Dni» и показать детали, затем я могу показать «имя» красным цветом.

Ответ JSON:

 [   {
     "Id": "001",

 "callRecords": [
   {
     "Name":"IM",
     "Surname": "1",
     "Age":"22"
   },
   {
     "Name":"You",
     "Surname": "2",
     "Age":"33"
 },
  {
     "Name":"He",
     "Surname": "3",
     "Age":"44"
 }
 ]

HTML

<ag-grid-angular #agGrid id="IdmasterDetail" class="ag-theme-balham aggrid--size-10-rows" [rowData]="rowData" [columnDefs]="columnDefs"
  [enableFilter]="true" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)" [suppressMenuHide]="true"
  [suppressRowClickSelection]="true" [masterDetail]="true" [detailCellRendererParams]="detailCellRendererParams" (gridReady)="onGridReady($event)">
</ag-grid-angular>

Я хочу, чтобы только в строке «Имя»: IM вся строка была красного цвета. спасибо.

Я не вижу истинного кода и настоящего JSon, но надеюсь показать свою проблему.

Извините за мой английский.

Answer 1

Вы можете попробовать этот код, здесь, если Id == 1, тогда цвет фона будет 'Red'

this.columnDefs = [
    {
    headerName: 'Id',
    field: 'Id',
    tooltipField: 'Id',      
    cellStyle: (params) => {
    if(params.data.Id == 1){
                    return { color: 'black', 'background-color': 'Red' };
                    }
                }
   }

Answer 2

Вот мой пример кода стека Вы можете проверить это StackBitz

Компонент

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  data =  [   
      {
       "Id": "001",
       "callRecords": [
          {
            "Name":"IM",
            "Surname": "1",
            "Age":"22"
          },
          {
            "Name":"You",
            "Surname": "2",
            "Age":"33"
        },
          {
            "Name":"He",
            "Surname": "3",
            "Age":"44"
        }
       ]
      }
     ];
}

Html

<table border="1">
  <tbody>
    <tr *ngFor="let info of data[0].callRecords;let i = index">
      <td [ngClass]="{'red': (i ==0)}">
        {{info.Name}}
      </td>
      <td>
        {{info.Surname}}
      </td>
      <td>
        {{info.Age}}
      </td>
    </tr>
  </tbody> 
</table>  

Css

.red {
  color: red;
}

Спасибо