Question

我遵循此link来使用Nativescript创建可折叠列表。

我有这个html代码：

python3 -m pip install --upgrade https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-0.12.0-py3-none-any.whl

和此代码在打字稿中

       <RadListView [items]="evgpsbyclientid0" [itemTemplateSelector]="templateSelector" class="list-group"
            (itemTap)="onItemTap($event)" >
            <ng-template tkListItemTemplate let-item="item">
                <GridLayout rows="auto,auto" columns="6*,*" class="add-dropdown" style="position:fixed">
                    <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                    <Image src="~/assets/images/dropdown.png" width="30" height="30" col="1"></Image>
                </GridLayout>
            </ng-template>
            <ng-template tkTemplateKey="expanded" let-item="item">
                <GridLayout rows="auto,auto" columns="80*,auto" class="add-dropdown" style="position:fixed">
                    <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                    <Image row="0" col="1" src="~/assets/images/dropup.png" width="30" height="30"></Image>
                    <StackLayout>
                        <Label [text]='"Data: " + item.datetime_device' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Desc: " + item.alarmdesc' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Seriali: " + item.device_serial' class="show-answer"></Label>
                        <hr>
                        <Label [text]='"Data Acted: " + item.dtm_acted' class="show-answer"></Label>
                        <hr>
                    </StackLayout>
                </GridLayout>
            </ng-template>
        </RadListView>

问题类似于图像。因此，在第一张图片中，我只显示[text] =“ item.device_serial”，在第二张图片中，我想在其他细节底部显示。在图像中，我的详细信息显示在文本的后面。

image1 image2

谢谢！

Answer 1

问题似乎出在您的布局上，您在GridLayout中定义了2行，但是您从未分配应在行索引1中显示的内容。因此，所有组件将在行索引0中重叠。

我也不确定您的代码中的hr是什么，猜测它是您的自定义组件。

更新：

展开的模板应该类似于

        <ng-template tkTemplateKey="expanded" let-item="item">
            <GridLayout rows="auto,auto" columns="80*,auto" class="add-dropdown" style="position:fixed">
                <Label [text]="item.device_serial" class="list-group-item" col="0"></Label>
                <Image row="0" col="1" src="~/assets/images/dropup.png" width="30" height="30"></Image>
                <StackLayout row="1">
                    <Label [text]='"Data: " + item.datetime_device' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Desc: " + item.alarmdesc' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Seriali: " + item.device_serial' class="show-answer"></Label>
                    <hr>
                    <Label [text]='"Data Acted: " + item.dtm_acted' class="show-answer"></Label>
                    <hr>
                </StackLayout>
            </GridLayout>
        </ng-template>

使用NativeScript的可折叠列表无法正常工作

1 个答案: