滚动到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可以做。