Как поймать клик по заголовку категории с помощью функции группировки RadListView?(Nativescript)

Question

Ранее я спрашивал о нескольких пунктах: функция группировки RadListView здесь .Я не получил ответа, поэтому хотел попытаться сосредоточиться на самой простой части: как мне отловить событие click в заголовке категории?

Обычно это было бы довольно просто, например <Label text="group.category" (tap)="youClickedTheCategory()"></Label>,

Но, используя функцию группировки с RadListView, категория не имеет html-записи, так как я узнаю, что пользователь нажимает на заголовок категории, а не где-то еще в группе?

Если пример кода полезен:

html:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

   public places = [
        {country: 'US', city: 'New York'}, 
        {country: 'US', city: 'Los Angeles'},     
        {country: 'Canada', city: 'Toronto'},
        {country: 'England', city: 'London'}
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

Результат будет:

Canada
--Toronto

England
--London

US
--New York
--Los Angeles

Цель: знатьесли пользователь щелкает заголовок категории страны (здесь, Канада, Англия или США), а не пользователь нажимает на всю группу.

Использование Nativescript Angular (для iOS).

Answer 1

Я нашел ответ, основываясь на этом обсуждении на github здесь .Ключом является tkGroupTemplate в RadListView.Для NativeScript (и iOS - вероятно, работает и для Android), если вы хотите иметь список с заголовками категорий и записями ниже и хотите иметь возможность нажимать на заголовки категорий, настоящий метод заключается в использовании tkGroupTemplate.

Вот пример:

$ tns plugin add nativescript-ui-listview

html компонента:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template tkListItemTemplate let-place="item">
            <StackLayout>
                <Label [text]="place.city" (tap)="listEntryTap(place.city)"></Label>
            </StackLayout>
        </ng-template>
        <ng-template tkGroupTemplate let-country="category">
            <StackLayout ios:height="25">
                <Label [text]="country" (tap)="headerTap(country)"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts: (файл компонента ts)

public places = [
         {country: 'US', city: 'New York'}, 
         {country: 'US', city: 'Los Angeles' },     
         {country: 'Canada', city: 'Toronto'},
         {country: 'England', city: 'London'},
         {country: 'US', city: 'Chicago'},
         {country: 'Canada', city: 'Calgary'}      
]
...
constructor(){}
...
myGroupingFunc(value) {
   return value.country;
}

headerTap(country){
    console.log('you tapped this country header: ' + country)
}

listEntryTap(city){
    console.log('you tapped this city entry: ' + city)
}

module.ts: (модуль для компонента - если используется отложенная загрузка компонентов. Если не используется отложенная загрузка, это, вероятно, будет указано в основном файле app.module.ts)

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

@NgModule({
  imports: [
  ...
   NativeScriptUIListViewModule 
  ]
...

И это должно привести кдалее, с кликабельными заголовками (странами) и записями (городами) по отдельности:

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago

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

Без ios:height="25" (или любой другой высоты) некоторые из заголовков категорий проходят через записи.

В противном случае, похоже, это работает для iOS и NativeScript 5.0+ (и, как я полагаю, для более ранних версий).