2017-01-07 4 views
2

Element Ref 및 쿼리 선택기를 사용하여 Angular 2 Application의 Table Row of Data에 액세스 할 수 없습니다.tbody의 하위 구성 요소 가져 오기

ngAfterViewInit(){ 
      var e1 = this._elementRef.nativeElement.querySelector("tbody"); 
         console.log(e1); 
       e1.draggable="true"; 
    } 

위의 코드는 tbody 및 child tr과 함께 데이터를 보여줍니다. 그러나

, I는 결과로서 null 또는 빈 어레이오고있다.]

ngAfterViewInit(){ 
      var e1 = this._elementRef.nativeElement.querySelectorAll("tbody tr"); 
         console.log(e1); 
       e1.draggable="true"; 
    } 

를 사용

+1

'tbody tr'으로 무엇을 선택 하시겠습니까? 'tbody' 아래에'tr'이 있으면이 명령을 호출 할 때까지 ''이 없을 수 있습니다. 그것을 테스트하기 위해 5-6 초 내에 setTimeout을 시도하십시오. – echonax

+0

querySelectorAll은 NodeList 배열을 반환합니다. querySelectorAll ("tbody tr") [0] – gaetanoM

+0

@echonax ....와 같이 첫 번째 자식 만이 목록의 첫 번째 요소를 가져온다면 필요한 경우에도 같은 생각으로 TimeOut을 설정하면 문제가 해결됩니다. 하지만 중간에 다른 일이 지연됩니다. Angular 2에서 알고있는 다른 기능이 있습니다.이 기능을 사용하면 더 원활하게 일을 처리 할 수 ​​있습니다. – user3856563

답변

0

querySelectorquerySelectorAll 차이가있다.

여기서 querySelector은 DOM을 반환하기 때문에 나타납니다 (데이터가 반환 된 것처럼).

하지만 querySelctorAll을 사용하면 노드 목록이 표시됩니다. 그래서, 그 물마루를 반복하려고 테이블 행을 얻을 것이다.

e1.forEach(tr => console.log(tr)); 
+0

@haris ... 같은 것을 시도했지만 응답에서 tbody를 얻었습니다. 문제는 DOM을 렌더링하는 것으로 생각됩니다. 시간이 걸립니다. 그러나 그 문제를 해결하는 방법을 알 수는 없지만, – user3856563

관련 문제