问题描述:

I'm trying to use ngFor under a template and retrieve children to modify them later.

Here is my template:

<div (mouseenter)="showTooltip()" (mouseleave)="hideTooltip()" (mousedown)='onMouseDown($event)' class='slider slider-{{ orientation }}'>

<div class='slider-track'>

<div #trackLow class='slider-track-low' [ngClass]="{hide: (type === 'slider' || selection === 'none' || selection === 'after')}"></div>

<div #trackSelection class='slider-selection' [ngClass]="{hide: (selection === 'none')}"></div>

<div #trackHigh class='slider-track-high' [ngClass]="{hide: (selection === 'none' || selection === 'before')}"></div>

</div>

<div class="slider-tick-label-container" [ngClass]="{hide: labels.length === 0}">

<div #labelElements *ngFor="let label of ticksLabels" class="slider-tick-label">{{ label }}</div>

</div>

<div class="slider-tick-container" [ngClass]="{hide: ticks.length === 0}">

<div #tickElements *ngFor="let tick of ticks" class="slider-tick {{ handleType }}">&nbsp;</div>

</div>

<div #tooltipMain class="tooltip tooltip-main {{ tooltipPosition }}" role="presentation">

<div class="tooltip-arrow"></div>

<div #tooltipMainInner class="tooltip-inner">Current value: {{ value }}</div>

</div>

<div #tooltipMin class="tooltip tooltip-min {{ tooltipPosition }}" role="presentation">

<div class="tooltip-arrow"></div>

<div #tooltipMinInner class="tooltip-inner"></div>

</div>

<div #tooltipMax class="tooltip tooltip-max {{ tooltipPosition }}" role="presentation">

<div class="tooltip-arrow"></div>

<div #tooltipMaxInner class="tooltip-inner"></div>

</div>

<div #minHandle tabindex="0" (keydown)="keydown(0, $event)" (focus)="showTooltip()" (blur)="hideTooltip()" class='slider-handle min-slider-handle {{ handleType }}' role='slider'></div>

<div #maxHandle tabindex="0" (keydown)="keydown(1, $event)" (focus)="showTooltip()" (blur)="hideTooltip()" class='slider-handle max-slider-handle {{ handleType }}' [ngClass]="{hide: type === 'slider'}" role='slider'></div>

</div>

Both ngFor are rended like this in DOM:

<div class="slider-tick-container">

<!--template bindings={}-->

</div>

In my component I try to retrieve elements with:

@ViewChildren('tickElements') private tickElements: QueryList<ElementRef>;

@ViewChildren('labelElements') private labelElements: QueryList<ElementRef>;

Both are undefined because of the rendering problem...

I try to remove the template and replace it by <div *ngFor="let i of [1,2,3,4]">{{i}}</div> and same problem !

The full code is available here: https://github.com/jaumard/ng2-bootstrap/blob/ticksLabels/components/slider/slider.component.ts#L15

相关阅读:
Top