0

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

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

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

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

有帮助的详细信息：

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

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

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

例如，我正在尝试做一个多级列表。看起来 RadListView 中的“分组”功能是（唯一？）执行此操作的方法。我已经从这里剪切并粘贴了代码，但它不起作用 - 带有“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>

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

4

1 回答 1

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,
  ]
...

酷组件.html：

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

酷组件.ts：

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

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

    constructor(){
   }
}
于 2018-12-11T19:43:12.300 回答