如何使用RadListView分组功能捕捉类别标题上的点击？（Nativescript）

我之前问过一些关于RadListView的分组函数的问题。我没有得到答案，所以我想试着关注最简单的部分：如何捕捉类别标题上的点击事件

通常情况下，这很容易，就像

但是使用RadListView的分组功能，类别没有html条目，因此我如何知道用户是否单击类别标题而不是组中的其他位置

如果示例代码有帮助：

html:

结果将是：

Canada
--Toronto

England
--London

US
--New York
--Los Angeles

目标：知道用户是否单击国家类别标题（这里是加拿大、英国或美国），而不是用户单击整个组

---

使用Nativescript Angular（用于iOS）。

我根据github的讨论找到了答案。关键是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>

module.ts：（组件的模块——如果使用组件的延迟加载。如果不使用延迟加载，这可能会出现在主app.module.ts文件中）

这将产生以下内容，标题（国家）和条目（城市）可分别单击：

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago

它看起来带有一些默认格式（标题自动具有不同的背景色）——但您可以使用自己的样式覆盖它

如果没有ios:height=“25”（或任何高度），一些类别标题会覆盖条目

---

不过，除此之外，这似乎适用于iOS和NativeScript 5.0+（我想，也适用于更早的版本）。

基于这个github讨论，我找到了答案。关键是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>

module.ts：（组件的模块——如果使用组件的延迟加载。如果不使用延迟加载，这可能会出现在主app.module.ts文件中）

这将产生以下内容，标题（国家）和条目（城市）可分别单击：

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago

看起来这是一些默认格式（标题自动具有不同的背景颜色）——但是您可以用自己的样式覆盖该格式

如果没有ios:height=“25”（或任何高度），一些类别标题会覆盖条目

---

否则，这似乎适用于iOS和NativeScript 5.0+（我想也适用于早期版本）。

RadListView不支持iOS特定功能的部分。但您可以使用不同的模板，一个用于标题，另一个用于项目。通过传递给itemTap事件的绑定上下文，您必须区分其中的标题和项目。令人惊讶的是，这个基本概念（当用户单击页面上的某个内容时捕获）并不存在。我需要每个条目显示在其类别标题下。如果有一个用于标题的模板和一个单独的用于条目的模板，它们不会在页面上单独显示吗？对不起，我不是说你必须单独捕获事件。如果是标题模板，即使在ListView和filter上，您也可以使用itemTap。我的意思是：标题模板和项目模板在页面上不会单独显示吗？那么会出现在英国、加拿大、美国，然后在所有这些国家的下面是多伦多、伦敦、纽约、洛杉矶吗？是的，这正是我的意思，即对标题和项目使用不同的模板，但仍然通过在正确的位置注入组元素来管理数据可能很困难，但可能是这样的。我个人更喜欢使用

nativescript accordion

，它非常适合对元素进行分组、在点击时展开特定部分等，RadListView不支持iOS特定功能的部分。但您可以使用不同的模板，一个用于标题，另一个用于项目。通过传递给itemTap事件的绑定上下文，您必须区分其中的标题和项目。令人惊讶的是，这个基本概念（当用户单击页面上的某个内容时捕获）并不存在。我需要每个条目显示在其类别标题下。如果有一个用于标题的模板和一个单独的用于条目的模板，它们不会在页面上单独显示吗？对不起，我不是说你必须单独捕获事件。如果是标题模板，即使在ListView和filter上，您也可以使用itemTap。我的意思是：标题模板和项目模板在页面上不会单独显示吗？那么会出现在英国、加拿大、美国，然后在所有这些国家的下面是多伦多、伦敦、纽约、洛杉矶吗？是的，这正是我的意思，即对标题和项目使用不同的模板，但仍然通过在正确的位置注入组元素来管理数据可能很困难，但可能是这样的。我个人更喜欢使用

nativescript accordion

，它非常适合对元素进行分组、在点击时展开特定部分等。，

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago