在GridView中更改单元格颜色

Question

我想更改包含特定值的单元格中的颜色，但这不起作用。

这是我的代码：

<style>
  .alert {
    margin-top: 10px;
    height: 500x;
    position: relative;
    width: 100%;
    /* padding: 15px; */
    bottom: 0%;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
  }

  .alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
  }


  table {
    border-collapse: collapse;
  }

  .spacing {
    padding-top: .5em;
    padding-bottom: .5em;
  }

  .k-tabstrip>.k-content.k-state-active {
    display: none !important;
  }
</style>


<div style="overflow-x: hidden; overflow-y: hidden;">

  <ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
    <p style="color: white"> Loading... </p>
  </ngx-spinner>

  <div class="form-group row col-md-12" style="margin-top:30px">
    <div class="col-md-1">
      <label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
      <kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
        [bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
      </kendo-datepicker>
    </div>

    <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
        (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
        EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
  </div>



<div class="form-group row">
  <div class="panel panel-default col-md-12  ">
    <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
      <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
        <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
            All</a></span>
        <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
            All</a></span>
        <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
          [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
          rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData" [frameworkComponents]="frameworkComponents">
        </ag-grid-angular>
      </div>

    </div>
  </div>
</div>

<div class="form-group row">

  <div class="panel panel-default col-md-12">
    <div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
      class="alert alert-danger col-md-5">
      <p><strong>The investments made in the following products are not included in this report:</strong></p>
      <table>
        <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
          <tr>
            <th> {{group[0].ProductType}}</th>
          </tr>
          <tr *ngFor="let post of group">
            <td> {{ post.ProductName  }} </td>
          </tr>
          <tr>
            <td class="spacing"></td>
          </tr>
        </ng-container>
      </table>
    </div>

    <div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
      class="col-md-7">
      <app-pie-chart [series]="allocation_series"></app-pie-chart>
    </div>


  </div>
</div>

</div>