RadListView 是否还存在（Nativescript pro-ui）答案

【问题标题】：Does RadListView still exist (Nativescript pro-ui)RadListView 是否还存在（Nativescript pro-ui）
【发布时间】：2018-12-12 04:06:39
【问题描述】：

编辑：我已经发布了让 RadListView 与分组功能 here 一起工作的更高级别版本。这里的问题只是让 RadListView 以其基本形式工作。

我已经离开 Nativescript pro ui 几个月了，现在我正在尝试整理一个多级列表（包含类别、每个类别中的项目；用户可以通过点击隐藏和显示类别）。从here 的讨论中，我看到 *ngFor 不是执行多级列表的稳定方法（尽管它是最简单的！）

所以现在我正在尝试使用 pro ui listview，但文档已有几个月的历史并使用术语“RadListView”。

RadListView 还存在吗？在 Nativescript Angular 中进行两级或三级列表的最佳文档是什么？

详细信息以防有帮助：

所以我现在尝试使用 RadListView 来执行此操作，但我不清楚 RadListView 是否已经存在。 Nativescript pro-ui 的市场列表显示旧的 pro-ui 已被弃用，现在必须单独下载 pro ui 的每个项目 (link)。

它为 pro ui“ListView”列出了一个npm listing，它使用了术语“ListView”。但是，当您单击该 npm 列表中的任何文档/示例代码链接时，它们都使用术语“RadListView”（旧公式）。

我无法让 RadListView 工作。即使对于最简单的示例（几个月前有效），如果我在组件 html 中使用 RadListView，屏幕也是空白的。

例如，我正在尝试做一个多级列表。看起来 RadListView 中的“分组”功能是（唯一？）执行此操作的方法。我已经从here 中剪切并粘贴了代码，但它不起作用 - 带有“RadListView”的空白屏幕和只有“ListView”的数据。

示例：

ts：

import { ListViewEventData, LoadOnDemandListViewEventData } from "nativescript-ui-listview";
import { RadListViewComponent } from "nativescript-ui-listview/angular";

export class SampleComponent implements OnInit {
  public arrayItems = [
                      {category:'person', name: 'jim', description: 'a very 
                       nice person'}, 
                      {category:'jungle animal', name: 'lion', description: 
                       'king of the jungle'}
                     ]

  private _myGroupingFunc: (item: any) => any;

   constructor (){
       this.myGroupingFunc = (item: arrayItems) => {
            return item.category;
        };
   }

   ngOnInit(): void {
   }

   get myGroupingFunc(): (item: any) => any {
        return this._myGroupingFunc;
    }

    set myGroupingFunc(value: (item: any) => any) {
        this._myGroupingFunc = value;
    }
}...

html:

<StackLayout>
   <ListView [items]="arrayItems" enableCollapsibleGroups="true" [groupingFunction]="myGroupingFunc" >
     <ng-template tkListItemTemplate let-arrayItem="item" >
      <StackLayout>
        <Label [text]="arrayItem.name"></Label>
        <Label [text]="arrayItem.description"></Label>    
      </StackLayout>
    </ng-template>
  </ListView>
</StackLayout>

使用从here 复制的这段代码，不会出现任何条目（只是 ListView 的行，里面没有任何内容）。如果我说“RadListView”而不是“ListView”，则屏幕完全是空白的。如果有人更新了此操作的代码，我将不胜感激。

【问题讨论】：

您的源代码中有一些错误，所以我猜您是重新输入而不是复制粘贴。具体来说，它没有 @Component 装饰器，并且您尝试使用 arrayItems 作为类型而不是 any。
我的实际来源有很多（包括@component）——为了简洁起见，它被编辑了。同时，RadListView 还存在吗？
这里是一个工作游乐场的例子：play.nativescript.org/?template=play-ng&id=mUqD4Y
我还不能让它工作——但我越来越近了。但是，我确实收到一条警告，说 iOS 不支持“可折叠组”。我需要让这个列表像手风琴一样工作：加载页面，只显示类别。单击一个类别，并显示该类别的条目。再次单击那只猫，然后隐藏条目。而且我必须知道点击了哪个类别。使用 *ngFor 很容易。使用分组的 RadListView 可以做到这一点吗？
我无法让操场工作。是否针对 NS 5.0+ 和最新的 pro-ui 插件进行了更新？我只是在页面上得到 [object object]。

标签： nativescript

【解决方案1】：

感谢伊恩麦克唐纳的帮助。 RadListView 仍然是列表视图的 Nativescript pro-ui 版本。它对我有用：

$ tns plugin add nativescript-ui-listview

$ npm i

$ tns update //don't know why/what was out of date, but features like the grouping function did not work for me until I ran this.

coolComponent.module.ts：（如果使用延迟加载，我只能通过将模块直接导入组件模块来让 RadListView 工作）

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
...
@ngModule({
   imports: [
    ...
   NativeScriptUIListViewModule,
  ]
...

coolComponent.html：

<GridLayout>
    <RadListView [items]="cats" >
        <ng-template tkListItemTemplate let-cat="item">
            <StackLayout>
                <Label [text]="cat"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

coolComponent.ts：

import { Component } from "@angular/core";
import { ListViewEventData, RadListView } from "nativescript-ui-listview";
...

export class CoolComponent {
    public cats = ['tiger', 'lion', 'puma']

    constructor(){
   }
}

【讨论】：