Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ngx datatable怪异行为(黑色背景到行和像素化字体)_Javascript_Angular_Typescript_Ngx Datatable - Fatal编程技术网

Javascript ngx datatable怪异行为(黑色背景到行和像素化字体)

Javascript ngx datatable怪异行为(黑色背景到行和像素化字体),javascript,angular,typescript,ngx-datatable,Javascript,Angular,Typescript,Ngx Datatable,作为本期的参考,我也附上了图片 我使用ngx数据表来显示数据。当我尝试在可见的行上持续悬停时,会发生三种情况 一行的背景变黑 一行的文本被像素化 一行的文本不可见 如果有人遇到此问题,请提供帮助。这是我的密码: 这是HTML 这是我已删除的属性:columnMode=“force” 案例一:(只是这一次两者同时发生) 案例二: 案例三: 无法再次复制此问题 我最初使用Angular 5,没有找到任何解决方案。我最近将项目升级到Angular 7.2.3并升级了软件包,这个问题自动得到了解决。

作为本期的参考,我也附上了图片

我使用ngx数据表来显示数据。当我尝试在可见的行上持续悬停时,会发生三种情况

  • 一行的背景变黑
  • 一行的文本被像素化
  • 一行的文本不可见 如果有人遇到此问题,请提供帮助。这是我的密码:

    这是HTML

    这是我已删除的属性:columnMode=“force”

    案例一:(只是这一次两者同时发生)

    案例二:

    案例三: 无法再次复制此问题


    我最初使用Angular 5,没有找到任何解决方案。我最近将项目升级到Angular 7.2.3并升级了软件包,这个问题自动得到了解决。

    你用css尝试过什么吗?@SaqibMustafaAbbasi刚刚尝试在悬停的行中添加白色背景,什么都没有发生。Plus也尝试移动css文件,但仍然存在相同的问题。
    <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>
    
    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);
      }
    
    }