ngx-datatable 奇怪的行为（行和像素化字体的黑色背景）

Question

为了这个问题的参考，我也附上了图片。

我正在使用 ngx-datatable 来显示数据。当我尝试连续将鼠标悬停在可见的行上时，会发生三种情况。

一行的背景变黑；
一行文字像素化；
一行文字不可见；

如果有人遇到过这个问题，请帮忙。这是我的代码：

Here's the HTML

这是我去掉的属性： columnMode="force"

<ngx-datatable
  class="material"
  [rows]="rows"
  [rowHeight]="80"
  [scrollbarV]="true"
  [scrollbarH]="true">
    <ngx-datatable-column [width]="30" name="Sr#" prop="sr"></ngx-datatable-column>
    <ngx-datatable-column [width]="350" name="KPIs" prop="kpis"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Weight" prop="weight"></ngx-datatable-column>
    <ngx-datatable-column [width]="200" name="KRA" prop="kra"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Jul" prop="months.jul"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Aug" prop="months.aug"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Sep" prop="months.sep"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Oct" prop="months.oct"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Nov" prop="months.nov"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Dec" prop="months.dec"></ngx-datatable-column>
    <ngx-datatable-column [width]="80" name="Avg Target Ach" prop="avgTargetAchOne"></ngx-datatable-column>
    <ngx-datatable-column [width]="80" name="Avg Target Kpi Wei" prop="avgTargetKpiWeiOne"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Jan" prop="months.jan"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Feb" prop="months.feb"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Mar" prop="months.mar"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Apr" prop="months.apr"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="May" prop="months.may"></ngx-datatable-column>
    <ngx-datatable-column [width]="60" name="Jun" prop="months.jun"></ngx-datatable-column>
    <ngx-datatable-column [width]="80" name="Avg Target Ach" prop="avgTargetAchTwo"></ngx-datatable-column>
    <ngx-datatable-column [width]="80" name="Avg Target Kpi Wei" prop="avgTargetKpiWeiTwo"></ngx-datatable-column>
    <ngx-datatable-column [width]="150" name="yardsticks"></ngx-datatable-column>
    <ngx-datatable-column [width]="250" name="remarks"></ngx-datatable-column>
</ngx-datatable>

Here's the TS File

export class CompObjectivesComponent implements OnInit {

  rows = [];

  constructor() {
    this.fetch((data) => {
      // this is an anonymous function that assign data to rows after fetching
      this.rows = data;
      console.log(this.rows)
    });
  }

  ngOnInit() {}

  // this method gets the data from a json file I have in assets
  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/100k.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

  addRow() {
    // this is something I have to work on later
    const obj = {
      "id": 0.0,
      "name": "Immad Hamid",
      "gender": "male",
      "age": 25,
      "address": {
          "state": "Sindh",
          "city": "Karachi"
      }
    }

    this.rows.push(obj);
    console.log(this.rows);
  }

}

Case One:(Only this time both happened at the same time)

Case Two:

Case Three: Wasn't able to reproduce this issue again...

Answer 1

我最初使用的是 Angular 5，但没有找到任何解决方案。我最近将项目升级到 Angular 7.2.3 并升级了软件包，此问题自动得到修复。

ngx-datatable 奇怪的行为（行和像素化字体的黑色背景）

ngx-datatable weird behavior (Black background to rows & pixelated fonts)

javascript

typescript

ngx-datatable

angular