Muestro datos con RadListView que tienen categorías y subentradas (Nativescript Angular, iOS).

Quiero que la página cargue mostrando solo las categorías, y si el usuario hace clic en cualquier categoría, alterna las entradas (que se muestran al hacer clic y luego se ocultan en otro clic).

¿Es posible

No he visto esto logrado con éxito con la versión actual de pro ui y NS. No he podido hacerlo funcionar yo mismo.

Más detalles sobre otros enfoques sonaqu.

Hay un complemento de acordeón NS, pero creo que el objetivo aquí debería ser posible con código directo, especialmente porque en mi caso quiero personalizar un poco.

Me he encontrado con dos problemas:

1) ¿Cómo aíslo el clic en la categoría en sí? La función de agrupación parece "ocultar" el título de la categoría mediante programación: no he podido saber cuándo el usuario hace clic en él (en lugar de registrar solo clics en todo el grupo) y no he podido diseñar ese encabezado de grupo. @

2)Una vez que se hace clic en el encabezado de la categoría, ¿cómo puedo mostrar / ocultar las entradas a continuación? Normalmente, usaría algo comovisibility="{{isClicked ? 'visible' : 'collapsed'}}, pero eso no funciona con RadListView.

Aquí hay un código de muestra para dar una mejor idea del 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?*****/
    }
}