Question

我正在使用RadListView显示具有类别和子条目（Nativescript Angular，iOS）的数据。

我希望页面加载仅显示类别，如果用户单击任何类别，它将切换条目（单击显示，然后隐藏另一单击）。

这可能吗？

我没有看到使用当前版本的pro ui和NS成功完成此操作。我自己无法使它正常工作。

有关其他方法的更多详细信息，请参见here。

有一个NS手风琴插件，但是我认为这里的目标应该可以通过简单的代码实现，特别是因为就我而言，我想自定义一点。

我遇到了两个问题：

1）我如何隔离类别本身的点击？分组功能似乎以编程方式“隐藏”了类别标题-我不知道用户何时单击它（而不是仅单击整个组进行注册），并且无法设置该组标题的样式。

2）单击类别标题后，如何显示/隐藏下面的条目？通常，我会使用类似visibility="{{isClicked ? 'visible' : 'collapsed'}}的名称，但这不适用于RadListView。

下面是一些示例代码，可让您更好地了解目标：

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

Answer 1

要使标题条目可点击，可以将tkGroupTemplate与类别（<ng-template tkGroupTemplate let-category="category">一起使用，如答案here所述。

但是，带有Nativescript的iOS当前不支持切换显示和隐藏条目。请参阅进一步的讨论here。在this discussion中，您似乎可以显示/隐藏条目。但是，在iOS上，该应用程序不会缩小隐藏区域或扩大显示区域。无论是否显示条目，该区域都将保持与加载时相同。看来Android没有此限制。

nativescript手风琴插件为切换提供了一些帮助，即使某些功能尚未解决。如果任何人都不愿意在Nativescript iOS上手风琴，那可能就是开始的地方。

如何使用RadListView制作手风琴列表？（本语）

1 个答案:

如何使用RadListView制作手风琴列表？ （本语）

1 个答案:

如何使用RadListView制作手风琴列表？（本语）