RadListView是否仍然存在(Nativescript pro-ui) [英] Does RadListView still exist (Nativescript pro-ui)

问题描述

我已经发布了使RadListView与分组功能

I have posted the higher level version of getting RadListView to work with the grouping function here. The question here addresses just getting RadListView to work in its basic form.

我离开Nativescript pro ui已经有几个月了，现在我正尝试建立一个多级列表(包含类别，每个类别中的项目；用户可以通过点击隐藏和显示类别).从讨论中此处，我看到* ngFor不是进行多级列表的一种稳定方法(尽管这是最简单的！)

I have been away from Nativescript pro ui for a few months, and now am trying to put together a multilevel list (with categories, items in each category; and user able to hide and show categories with tap). From the discussion here I see that *ngFor is not the stable way to do a multilevel list (though it is the easiest!)

所以现在我尝试使用pro ui listview，但是文档已有几个月的历史，并且使用术语"RadListView".

So now I am trying to use the pro ui listview, but the documentation is a few months old and uses the term "RadListView".

RadListView是否仍然存在?在Nativescript Angular中建立两级或三级列表的最佳文档是什么?

Does RadListView still exist? And what is the best documentation for doing a two or three level list in Nativescript Angular?

有帮助的详细信息:

因此，我现在正尝试使用RadListView来执行此操作，但是对我来说，尚不清楚RadListView是否已存在. Nativescript pro-ui的市场列表显示旧的pro-ui已被弃用，并且现在必须单独下载pro ui的每个项目(

So I am now trying to use RadListView to do this, but it is not clear to me that RadListView exists at all anymore. The market place listing for Nativescript pro-ui says the old pro-ui has been deprecated, and each item of the pro ui now must be downloaded individually (link).

它为专业版"ListView"列出了 npm列表，使用术语"ListView".但是，当您单击该npm列表中的任何文档/示例代码链接时，它们都使用术语"RadListView"(旧的提法).

It lists an npm listing for the pro ui "ListView", that uses the term "ListView". But, when you click on any of the documentation / sample code links in that npm listing, they all use the term "RadListView" (the old formulation).

我无法使RadListView正常工作.即使对于最简单的示例(几个月前就已经起作用)，如果我在组件html中使用RadListView，屏幕也将为空白.

I am not able to get RadListView to work. Even for the most simple example (which worked a few months ago), if I use RadListView in my component html, the screen is blank.

例如，我正在尝试创建多级列表.看起来RadListView中的分组"功能是执行此操作的(唯一方法).我已经从此处粘贴并粘贴了代码a>，但不起作用-带有"RadListView"的黑屏，仅带有"ListView"的无数据.

For example, I am trying to do a multilevel list. Looks like the "grouping" function in RadListView is the (only?) way to do this. I have cut and pasted in the code from here, but it does not work--blank screen with "RadListView" and no data with just "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"，则屏幕完全空白.如果有人为该操作更新了代码，我将不胜感激.

With this code, copied from here, there are not entries that appear (just the lines of a ListView with nothing inside). If I say "RadListView" instead of "ListView", the screen is entirely blank. I would definitely appreciate if someone has updated code for this action.

推荐答案

感谢Ian MacDonald的帮助. RadListView确实保留为列表视图的Nativescript pro-ui版本.像这样对我有用:

Thanks to Ian MacDonald for his help. RadListView does remain the Nativescript pro-ui version of list view. It works for me like this:

$ 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正常工作)

coolComponent.module.ts: (if using lazy loading, I was only able to get RadListView to work by importing the module directly into the component module)

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

coolComponent.html:

coolComponent.html:

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

coolComponent.ts:

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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！