可滚动和 rtl 在 primeNG 表中不起作用答案

【问题标题】：scrollable and rtl doesn't work in primeNG table可滚动和 rtl 在 primeNG 表中不起作用
【发布时间】：2018-11-04 13:12:34
【问题描述】：

我想要一个带有水平和垂直滚动条的表格。当我们的表格不使用 rtl 方向时，primeNg 中的展示可以正常工作！

当我们使用水平滚动和 rtl 方向滚动时，不会在表头上滚动！当我们在 rtl dir 中使用时，表头是固定的

我的代码：

 <div dir="rtl">
  <p-table  dir="rtl" #dt
           [columns]="cols"
           [value]="cars"
           [paginator]="true"
           [rows]="10"
           [scrollable]="true"
           scrollHeight="200px"
            [style]="{width:'1000px'}">

    <!-- below for fixining columns withs-->
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" style="width:150px;">
      </colgroup>
    </ng-template>

    <ng-template pTemplate="header"  let-columns>
      <tr dir="rtl" class="ui-rtl">
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>

    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
      </tr>
    </ng-template>
  </p-table>

</div>

【问题讨论】：

标签： scrollbar primeng right-to-left primeng-datatable

【解决方案1】：

PrimeNG 不支持表格组件的 RTL。

所以解决方法是监听正文上的滚动事件并将相同的确切移位分配给标题：

scrollableTableBodyScroll: () => void;  

constructor(
  private el: ElementRef,
  private zone: NgZone,
) { }
    
ngAfterViewInit(): void {
    const scrollableTableHeader: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-header');
    const scrollableTableBody: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-body');
    this.zone.runOutsideAngular(() => {
        this.scrollableTableBodyScroll =  this.renderer.listen(scrollableTableBody, 'scroll', () => {
          scrollableTableHeader.scrollLeft = scrollableTableBody.scrollLeft;
        });
    });
}

ngOnDestroy(): void {
    this.scrollableTableBodyScroll();
}

使用NgZone的原因

【讨论】：