Estou mostrando dados com o RadListView que possui categorias e subentradas (Nativescript Angular, iOS

Eu quero que a página carregue mostrando apenas as categorias e, se o usuário clicar em qualquer categoria, ele alterna as entradas (mostrando no clique e depois ocultando outro clique

Isso é possível

Não vi isso com êxito com a versão atual do pro ui e do NS. Não consegui fazê-lo funcionar sozinho.

Mais detalhes sobre outras abordagens sãoAqu.

Existe um plug-in de acordeão NS, mas acho que o objetivo aqui deve ser possível com código direto, especialmente porque no meu caso eu quero personalizar um pouc

Eu tive dois problemas:

1)Como isolar o clique na própria categoria? A função de agrupamento parece "ocultar" o título da categoria programaticamente - não pude saber quando o usuário clica nele (em vez de registrar apenas cliques em todo o grupo) e não foi capaz de estilizar o cabeçalho do grupo.

2) Uma vez clicado no cabeçalho da categoria, como mostro / oculto as entradas abaix Normalmente, eu usaria algo comovisibility="{{isClicked ? 'visible' : 'collapsed'}}, mas isso não está funcionando com RadListVie

Aqui está um exemplo de código para dar uma noção melhor do objetivo:

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?*****/
    }
}