滚动到 Angular 应用程序中的表格行或列表项

Question

在下面的代码快照中app.component.html，我在第 39 到 58 行的表中显示可单击的行。一旦用户单击一行，我就会在suraTable第 63 到 77 行所示的表中显示其他相关行。即，当用户单击时连续调用函数onSelectAya(aya, suraTable)in 。app.component.ts该函数加载必要的行并显示表格。

我所坚持的是这个。假设suraTable最终有 100 行。当前的行为是当然显示第 1、2、3...行。我需要能够显示第 50 行的表格（aya第 91 行参数中携带的信息）。我如何滚动到该位置？我尝试了scrollTop方式，但是当检查设置之前和之后的值时suraTable.scrollTop，该值始终为0（即0像素）。第 100 行显示，当console.log(suraTable)到达时，浏览器中会生成预期的输出，这意味着我一开始就正确地掌握了该元素。

那么，如何从组件内滚动到表中的特定行或列表中的项目（如果更容易的话，我可以将整个结构转换为列表）app.component.ts？谢谢。

Answer 1

<mat-row id="{{task.taskId}}"
                *matRowDef='let task; columns: columnsReadyTask;let i = index;'></mat-row>

如果使用数据源，在获取页面上带有 id 的元素后，您将需要一些延迟...

setTimeout(() => {
      const selectedRow = document.getElementById(taskId);
      if(selectedRow) {
        selectedRow.scrollIntoView({block: 'center'});
      }
    }, 500);