Для справки по этой проблеме я также прилагаю изображения.
Я использую ngx-datatable для отображения данных.Когда я пытаюсь постоянно наводить курсор на видимые строки, происходит три случая:
- Фон одной строки становится черным;
- Текст одной строки становится пикселированным;
- Текст одной строки не виден;
Если кто-то сталкивался с этой проблемой, пожалуйста, помогите.Вот мой код:
Вот 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>
Вот файл TS
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);
}
}
Случай первый: (Только на этот раз оба произошли в одно и то же времявремя) 
Случай второй: 
Случай третий: не удалось воспроизвести эту проблему снова ...