Question

我想在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() {}

如何添加第一行的颜色＆＃39;名称＆＃39;在主要细节？

我收到很多行＆＃39; Dni＆＃39;我想点击一个＆＃39; Dni＆＃39;并显示详细信息，然后我可以显示＆＃39; name＆＃39;红色。

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>

我只希望在行中排名＆＃39;姓名＆＃39; ：IM所有行都是红色。感谢。

我无法看到真正的代码和真正的JSon，但我希望能够展示我的问题。

抱歉我的英文。

Answer 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;
}

由于

Answer 2

你可以尝试这个代码，如果Id == 1，那么background-color将是'Red'

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

在行主/细节AgGrid Angular2中添加颜色

2 个答案: