Question

编辑：我发布了使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）。

它列出了“ 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”，则屏幕完全空白。如果有人为该操作更新了代码，我将不胜感激。

Answer 1

感谢Ian MacDonald的帮助。 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(){
   }
}

RadListView是否仍然存在（Nativescript pro-ui）

1 个答案: