在行主/详细信息 AgGrid Angular2 中添加颜色答案

【问题标题】：Add color in row master/detail AgGrid Angular2在行主/详细信息 AgGrid Angular2 中添加颜色
【发布时间】：2018-10-13 08:59:47
【问题描述】：

我想在 Angular2 的主细节 agGrid 的第一行添加颜色，但我无法获得

我添加了这个 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 ，但我希望能显示我的问题。

对不起我的英语。

【问题讨论】：

请发布您使用的完整代码。
我用 Json 和代码更新了，谢谢。

标签： angular ag-grid

【解决方案1】：

这是我的 stackbitz 示例代码。你可以查看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;
}

谢谢

【讨论】：

【解决方案2】：

你可以试试这个代码，这里如果 Id == 1 那么背景颜色将是“红色”

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

【讨论】：

我尝试将这些代码放在 this.detailCellRendererParams 中，什么都没有。