Складной список с NativeScript не работает хорошо - PullRequest
Новая
       23

Складной список с NativeScript не работает хорошо

0 голосов
/ 26 ноября 2018

Я перехожу по этой ссылке , чтобы создать складной список с помощью 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

Спасибо!

1 Ответ

0 голосов
/ 26 ноября 2018

Кажется, проблема в макете, у вас есть 2 строки, определенные в GridLayout, но вы никогда не назначали то, что должно отображаться в индексе строк 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>
...