如何使用RadListView分组功能捕获类别标题上的单击？ （本语）

Question

我之前曾问过一些有关re的项目：RadListView的分组功能here。我没有得到答案，所以想尝试着眼于最简单的部分：如何在类别标题上捕获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讨论here，我找到了答案。关键是RadListView中的tkGroupTemplate。对于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+（我也认为是早期版本）。