angularjs - Angular 2 ngFor レンダリングしない

Question

ngForテンプレートの下で使用し、子を取得して後で変更しようとしています。

ここに私のテンプレートがあります：

<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>

どちらngForも DOM では次のようにレンダリングされます。

<div class="slider-tick-container">
    <!--template bindings={}-->
</div>

私のコンポーネントでは、次の要素を取得しようとしています:

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

レンダリングの問題により、両方とも未定義です...

テンプレートを削除して<div *ngFor="let i of [1,2,3,4]">{{i}}</div>、同じ問題に置き換えようとしています!

完全なコードはこちらから入手できます: https://github.com/jaumard/ng2-bootstrap/blob/ticksLabels/components/slider/slider.component.ts#L15