ViewChildren дублирующий элемент

Question

Я уже несколько часов пытаюсь понять это, но не смог.По некоторым причинам длина шаблонов #grid и #label на 1 элемент больше, и я не знаю, почему дублируется первый элемент.Вот как я их получаю:

@ViewChildren('grid') grids: QueryList<ElementRef>;
@ViewChildren('label') labels: QueryList<ElementRef>;

И когда я показываю их длину, результат равен 3 вместо 2-> это длина availableServices

console.log('grids len : ' + this.grids.length);
console.log('labels len : '  + this.labels.length);

<RadListView [items]="availableServices" class="radlist-group"
                        swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)"
                        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A" style="height:100%">
                <ng-template tkListItemTemplate let-service="item">
                    <FlexboxLayout flexDirection="row" backgroundColor="#26252A">
                        <GridLayout class="item"
                                    [id]="service.name"
                                    #grid
                                    rows="*, *, 2*" columns="100, *, 10">
                            <StackLayout row="0" rowSpan="3" col="0" backgroundColor="rgba(0,0,0,0.3)" height="80" width="80" verticalAlignment="center" horizontalAlignment="center" borderRadius="5">
                                <Label class="detailLabels" [text]="hi"></Label>
                            </StackLayout>
                            <StackLayout row="0" col="1" rowSpan="2" backgroundColor="rgba(0,0,0,0.3)" height="24" width="40%" verticalAlignment="center" horizontalAlignment="left" borderRadius="5">
                                <Label class="detailLabels" [text]="service.minutes + ' minutes'"></Label>
                            </StackLayout>
                            <StackLayout row="2" col="1" backgroundColor="rgba(0,0,0,0.3)" height="40" width="100%" verticalAlignment="center" horizontalAlignment="left" borderRadius="5">
                                <Label class="detailLabels" [text]="service.name"></Label>
                            </StackLayout>
                        </GridLayout>
                    </FlexboxLayout>
                </ng-template>

                <GridLayout *tkListItemSwipeTemplate columns="*, auto">
                    <StackLayout id="delete-view" col="1"
                                 class="delete-view">
                        <Image #label src="res://check-mark" height="80" width="100" (tap)="add($event)"></Image>
                    </StackLayout>
                </GridLayout>

            </RadListView>

Answer 1

Вы не должны использовать ID или ViewChildren для элементов внутри ListView.Из-за особенностей повторного использования элементов в зависимости от размера экрана, он может не всегда соответствовать длине ваших элементов данных.

Всегда играть с данными, но не с самим элементом.