Как сделать аккордеонный список с RadListView?(Nativescript)

Question

Я показываю данные с RadListView, у которого есть категории и подстатьи (Nativescript Angular, iOS).

Я хочу, чтобы при загрузке страницы отображались только категории, и если пользователь нажимает на какую-либо категорию, он переключает записи (показывается при нажатии, а затем скрывается при повторном нажатии).

Естьэто возможно?

Я не видел, чтобы это успешно выполнялось с текущей версией pro ui и NS.Я не смог заставить его работать сам.

Более подробная информация о других подходах здесь .

Существует плагин NS для аккордеона, но я думаю, что цельэто должно быть возможно с прямым кодом, особенно потому, что в моем случае я хочу настроить справедливый бит.

Я столкнулся с двумя проблемами:

1) Как изолироватьнажмите на саму категорию? Кажется, что функция группировки «скрывает» заголовок категории программно - я не смог узнать, когда пользователь нажимает на нее (вместо того, чтобы регистрировать только щелчки на всю группу), и не былвозможность стилизовать заголовок этой группы.

2) Как только вы щелкнете заголовок категории, как мне показать / скрыть записи ниже? Обычно я бы использовал что-то вроде visibility="{{isClicked ? 'visible' : 'collapsed'}}, ноэто не работает с RadListView.

Вот пример кода, чтобы лучше понять цель:

html:

<GridLayout >
    <RadListView [items]="places" selectionBehavior="Press" (itemSelected)="itemSelected($event)" [groupingFunction]="myGroupingFunc" >
        <ng-template tkListItemTemplate let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
                 <Label [text]="place.people" ></Label> //NOTE: I have not yet determined how to show this second level data within RadListView. 
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

import { Component, OnInit, } from "@angular/core";
import { Router, } from "@angular/router";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListView, ListViewEventData, } from "nativescript-ui-listview";

@Component({
    selector: "Sample",
    moduleId: module.id,
    templateUrl: "./sample.component.html",
})

export class SampleComponent implements OnInit  {

    public places = [
        {country: 'US', city: 'New York', people: [{name: 'Bill', age: 22}, {name: 'Suzy', age: 23} ] }, 
        {country: 'US', city: 'Los Angeles', people: [{name: 'Sarah', age: 21}, {name: 'Barb', age: 23} ] },     
        {country: 'Canada', city: 'Toronto', people: [{name: 'Fred', age: 30}, {name: 'Ted', age: 31} ] },
        {country: 'England', city: 'London', people: [{name: 'Jim', age: 22}, {name: 'Joe', age: 19} ] }
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

    itemSelected(args) {
       /***is there a way this can isolate the tap on country name?*****/
    }
}

Answer 1

Чтобы сделать записи заголовков кликабельными, вы можете использовать tkGroupTemplate с категориями (<ng-template tkGroupTemplate let-category="category">), как более подробно описано в ответе здесь .

Однако переключение отображения и скрытия записейв настоящее время не поддерживается в iOS с Nativescript.Смотрите дальнейшее обсуждение здесь .Из этого обсуждения похоже, что вы можете показать / скрыть записи.Однако на iOS приложение не будет уменьшать область при скрытии или увеличивать область при отображении.Область останется такой же, как и при загрузке, независимо от того, отображаются записи или нет.Похоже, что Android не имеет этого ограничения.

Плагин аккордеона nativescript обеспечивает некоторую помощь при переключении, хотя некоторые функции еще не проработаны.Если кто-то отчаянно нуждается в аккордеоне на Nativescript iOS, это, вероятно, то место, с которого стоит начать.