如何在拖动ngx-datatable、Angular4列时滚动水平滚动条

在拖动ngx-datatable和Angular4列时滚动水平滚动条，可以按照以下步骤进行操作：

首先，确保已经安装并引入了ngx-datatable和Angular4相关的依赖包。
在Angular4组件中，引入ngx-datatable的相关模块和组件，并在模板中添加ngx-datatable的标签。
在组件中定义数据源，并将数据源绑定到ngx-datatable的数据属性上。
在ngx-datatable的标签中，设置列定义，包括列的名称、宽度、排序等属性。
在ngx-datatable的标签中，设置滚动条相关的属性，包括滚动条的高度、宽度、是否可见等。
在组件中，监听ngx-datatable的列拖动事件，当列拖动时，获取拖动的距离。
根据拖动的距离，计算滚动条的位置，并将滚动条的位置应用到ngx-datatable中。
当滚动条位置发生变化时，更新数据源，以显示滚动条对应位置的数据。

以下是一个示例代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-datatable',
  template: `
    <ngx-datatable
      class="material"
      [rows]="data"
      [columns]="columns"
      [scrollbarH]="true"
      (columnReordered)="onColumnReordered($event)"
    >
    </ngx-datatable>
  `,
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent {
  data: any[] = [
    { name: 'John', age: 25, city: 'New York' },
    { name: 'Jane', age: 30, city: 'London' },
    { name: 'Bob', age: 35, city: 'Paris' }
  ];

  columns: any[] = [
    { prop: 'name', name: 'Name' },
    { prop: 'age', name: 'Age' },
    { prop: 'city', name: 'City' }
  ];

  onColumnReordered(event: any) {
    const scrollBar = document.querySelector('.datatable-scroll');
    const scrollLeft = (event.column.dragDistance - event.column.dragStartDistance) * -1;
    scrollBar.scrollLeft += scrollLeft;
  }
}

在上述示例中，我们使用了ngx-datatable组件来展示数据，并监听了列拖动事件columnReordered。在onColumnReordered方法中，我们获取拖动的距离，并将其应用到滚动条上，实现水平滚动的效果。

请注意，以上示例中的代码仅供参考，具体实现方式可能因项目环境和需求而有所不同。对于ngx-datatable的更多详细信息和使用方法，可以参考腾讯云的相关文档和示例代码。