Scrollen zu einer Tabellenzeile oder einem Listenelement in einer Angular-App

Question

Im Codeschnipshot unten in app.component.html werden klickbare Zeilen in einer Tabelle in den Zeilen 39 bis 58 angezeigt. Sobald der Benutzer auf eine Zeile klickt, werden andere relevante Zeilen in einer Tabelle angezeigt Benannt suraTable wie in den Zeilen 63 bis 77 gezeigt. Wenn nämlich der Benutzer auf eine Zeile klickt, wird die Funktion onSelectAya(aya, suraTable) in app.component.ts aufgerufen. Diese Funktion lädt die notwendigen Zeilen und die Tabelle wird angezeigt.

Woran ich festhalte, ist dies. Angenommen, suraTable endet mit 100 Zeilen. Das aktuelle Verhalten ist, dass die Zeilen 1, 2, 3 ... natürlich angezeigt werden. Ich muss in der Lage sein, die Tabelle in Zeile 50 zu zeigen (Information, die in dem Parameter aya in Zeile 91 übertragen wird). Wie scrolle ich zu dieser Position? Ich habe versucht, die scrollTop Weg, aber beim Überprüfen der Werte vor und nach der Einstellung suraTable.scrollTop, ist der Wert immer 0 (0 Pixel, das ist). Zeile 100 zeigt an, dass bei Erreichen von console.log(suraTable) die erwartete Ausgabe im Browser generiert wird, was bedeutet, dass ich das Element richtig anfange.

Also, wie blättern Sie zu einer bestimmten Zeile in einer Tabelle oder zu einem Element in einer Liste (ich könnte die gesamte Struktur in eine Liste konvertieren, wenn einfacher) aus der app.component.ts Komponente? Vielen Dank.

Answer 1

Das auf alten Browsern möglicherweise nicht.

Wenn dies ist einfach eine Scrolling Sache, könnte man bestimmte ID in Ihre Zeilen hinzufügen, so dass Sie theyr Nummer kennen können, und tun dann

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

Wenn, wenn das Scrollen Teil nehmen wird Ihr Element nicht gerendert wird auf DOM, versuche einen Callback hinzuzufügen, wenn das Rendering beendet ist. Wenn das nicht möglich ist, kann vielleicht ein setTimeout tun.