角度2 ng不渲染

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