ScrollTo 过早触发导致无法一直滚动
ScrollTo fires too early resulting in not scrolling all the way
我正在制作一个 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 示例:
您应该使用 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。
我正在制作一个 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 示例:
您应该使用 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。