Существует ли еще RadListView (Nativescript prouui)

Question

Редактировать: Я разместил версию более высокого уровня, чтобы RadListView работал с функцией группировки здесь .Вопрос здесь касается только того, чтобы заставить RadListView работать в его основной форме.

---

Я был в отъезде с Nativescript pro ui в течение нескольких месяцев, и сейчас пытаюсь собрать многоуровневый список (с категориями,элементы в каждой категории, и пользователь может скрывать и отображать категории с нажатием).Из обсуждения здесь я вижу, что * ngFor не является стабильным способом создания многоуровневого списка (хотя это самый простой!)

Так что теперь я пытаюсь использовать просмотр списка pro ui, но документации несколько месяцев и используется термин "RadListView".

RadListView все еще существует?И какова лучшая документация для создания списка из двух или трех уровней в Nativescript Angular?

Подробности в случае, если это полезно:

Так что я сейчас пытаюсь использовать RadListView длясделайте это, но мне не ясно, что RadListView вообще существует.В рыночном листинге для прокси-сервера Nativescript сказано, что старый прокси-интерфейс устарел, и теперь каждый его элемент должен быть загружен отдельно ( ссылка ).

В нем перечислены npm листинг для программы «ListView», которая использует термин «ListView».Но когда вы нажимаете на любую из ссылок на документацию / пример кода в этом списке npm, все они используют термин «RadListView» (старая формулировка).

Я не могу заставить RadListView работать.Даже для самого простого примера (который работал несколько месяцев назад), если я использую RadListView в html своего компонента, на экране ничего не отображается.

Например, я пытаюсь создать многоуровневый список.Похоже, что функция «группировки» в 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», экран будет совершенно пустым.Я был бы признателен, если бы кто-то обновил код для этого действия.

Answer 1

Спасибо Иану Макдональду за помощь.RadListView остается версией Nativescript для просмотра списка.У меня это работает так:

$ 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(){
   }
}