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

您不应该对ListView中的元素使用ID或ViewChildren。由于它基于屏幕大小重用元素的性质，它可能并不总是与您的数据项的长度匹配。

总是玩数据，而不是元素本身。