NativeScript 的可折叠列表效果不佳

Question

我按照link 使用 Nativescript 创建可折叠列表。

我有这个 html 代码：

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

以及打字稿中的这段代码

 import { isAndroid } from "platform";
 import { ListViewEventData } from "nativescript-ui-listview";

 public ngOnInit() {
    this.eventsgps.mobile_eventgetbyclientidActed0().subscribe(
            evgpsbyclientid0 => {
                this.evgpsbyclientid0 = evgpsbyclientid0;
            }
        );
    }

    templateSelector(item: any, index: number, items: any): string {
        return item.expanded ? "expanded" : "default";
      }

    onItemTap(event: ListViewEventData) {
        const listView = event.object,
            rowIndex = event.index,
            dataItem = event.view.bindingContext;

        dataItem.expanded = !dataItem.expanded;
        if (isAndroid) {
            listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
        }
      }

问题就像图片中的一样。 所以在第一张图片中我只显示 [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>