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

Question

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

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

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

Answer 1

这可能不适用于旧浏览器。

如果这只是一个滚动的东西，你可以为你的行添加特定的id，这样你就可以知道它们的数量，然后做

var elmnt = document.getElementById("rowNumber"+rowNumber);
elmnt.scrollIntoView();

如果在滚动时，您的元素不会在DOM上呈现，请尝试在该呈现完成时添加回调。如果那是不可能的，也许setTimeout可以做到。