азываю данные с 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?*****/
    }
}