ScrollTo 过早触发导致无法一直滚动

Question

我正在制作一个 Angular 应用程序，它显示一个带有单个 tr 的 table。此行包含多个包含数据的 td。 table 是这样构建的：

<div class="col" id="TableCol">
    <table id="Table">
      <tbody>
        <tr>
          <td *ngFor="let item of items;">
            <div 
            (click)="ItemSelected(item)" 
            draggable="true" 
            [class.selected]="item.id == selecteditem?.id"
            (dragstart)="dragStart($event, item)" 
            (drop)="dropItem($event, item)" 
            (dragover)="dragoverItem($event, item)">
              {{item.description}}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

table 溢出其 X 值时可滚动

#TableCol{ overflow-x: scroll; }

现在我有一个函数可以在这个 tr 的右侧添加一个 td。当这个函数被调用时，一个额外的 td 出现在我的 table 中并且滚动工作正常。

我想要实现的是当我添加一个新的td时table会自动一直滚动到右边。

我尝试在将新项目添加到项目数组后立即调用此函数。

this.items.push(item);

scrollRight() {
document.querySelector('#mapLocationTableCol').scrollLeft = 10000;}

和

scrollRight() {
document.querySelector('#mapLocationTableCol').scrollTo(10000, 0);}

这两个结果相同：除了最后一个元素，他们一直向右滚动我的行。

我认为这是因为在重绘 table 之前调用了 scrollRight()。

有人有办法让它在绘制 table 后滚动吗？

编辑：我做了一个 stackblitz 示例：

https://stackblitz.com/edit/angular-d6lm6k

Answer 1

您应该使用 ViewChildren 和 QueryList.changes 事件监视 table 单元格的创建。在标记中，在 td 元素上设置模板引用变量：

<td #cells *ngFor="let item of items;">

代码中使用ViewChildren获取这些元素的列表，订阅ngAfterViewInit中的QueryList.changes事件。如果添加了新单元格，请进行滚动。在下面的代码中，我设置了一个标志以确保仅在需要时执行自动滚动。

@ViewChildren("cells") cells: QueryList<ElementRef>;

private shouldScrollRight = false;
...

addItem() {
  this.shouldScrollRight = true;
  this.items.push(item);
}

ngAfterViewInit() {
  this.cells.changes.subscribe((cellList) => {
    if (this.shouldScrollRight) {
      this.shouldScrollRight = false;
      this.scrollRight();
    }
  });
}

有关演示，请参阅 this stackblitz。

ScrollTo 过早触发导致无法一直滚动

ScrollTo fires too early resulting in not scrolling all the way

javascript

html

angular

scrollto