2017-10-31 14 views
0

* ngFor를 사용하여 여러 개의 div를 만듭니다. 그들 중 한 명에게 손을 얹고 싶습니다. elReference가 정의되지 않은 남아 있기 때문에#nlement를 * ngFor로 만든 요소에 바인딩하십시오.

.html 
<div #elReference *ngFor="let el of elements> HEHE </div> 

.ts 
    @ViewChild("elReference") elReference: ElementRef; 

분명히, 당신은 * ngFor와 ViewChild 사용할 수 없습니다.

* ngFor를 사용하여 만든 요소 참조를 어떻게 얻습니까?

+0

이 스레드를 살펴 보자 :은 https ://stackoverflow.com/questions/40165294/access-multiple-viewchildren-using-viewchild –

+0

감사. @ViewChildren ("elReference")을 시도했습니다. elReferences : QueryList ; , 그러나 여전히 elReferences에 대해 정의되지 않은 값을 얻습니다. – sanjihan

+0

나는 그것을 onInit()에서 사용했다. ngAfterViewInit은 필수 항목입니다. – sanjihan

답변

2

가 선택적으로 을 템플릿 변수를 추가 할 수있는 방법이 없습니다하지만 당신은 그에 의해 선택적으로 마커를 추가하고 필터링 할 수 있습니다

<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div> 
ngAfterViewInit() { 
    console.log(this.elReference.toArray() 
     .filter(r => r.nativeElement.hasAttribute('foo'))); 
} 
+0

Danke schön을 반환합니다. 지금까지 나는 항상 ViewChild와 #elReference를 onInit() 내부에서 사용했습니다. 이 경우 ngAfterViewInit을 사용해야하는 이유는 무엇입니까? – sanjihan

+1

'* ngFor'가'@Input()'에 전달 된 데이터에 의존하는 경우 아직 렌더링되지 않습니다. –