각도 응용 프로그램에서 표 행 또는 목록 항목으로 스크롤

Question

app.component.html의 코드 스냅 샷에서 나는 39 ~ 58 행의 표에 클릭 가능한 행을 표시합니다. 사용자가 행을 클릭하면 표에 다른 관련 행을 표시합니다 즉, 행을 클릭하면 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

이 오래된 브라우저에서 작동하지 않을 수 있습니다.

이 당신이 theyr 수를 알 수 있도록 단순히 스크롤 것은, 당신이 당신의 행에 특정 ID를 추가 할 수 있으며, 스크롤이 요소가 렌더링되지 않습니다 참여하는 경우 경우

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

을 할 경우 DOM, 해당 렌더링이 끝날 때 콜백을 추가하십시오. 그게 가능하지 않다면 setTimeout 할 수 있습니다.