アプリケーションに RadListView を実装するのが非常に困難です。ドキュメントによると、ListView はアイテムを ObservableArray として受け入れますが、それまたはプレーン配列が使用されているかどうかに関係なく、アイテムは表示されません。Playgroundにサンプルアプリを用意しました
https://play.nativescript.org/?template=play-ng&id=39xE2X&v=11
コンポーネントは次のようになります。
import { Component, ViewChild, OnInit, ChangeDetectorRef, ElementRef } from "@angular/core";
import { GestureTypes, PanGestureEventData, TouchGestureEventData } from "tns-core-modules/ui/gestures";
import { ObservableArray } from "tns-core-modules/data/observable-array";
@Component({
selector: "ns-app",
moduleId: module.id,
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
public gridData = []; //new ObservableArray<any>();
constructor(
private cd: ChangeDetectorRef
) {
this.feedTestData();
}
ngOnInit() {
}
ngAfterViewInit() {
}
public detectChanges() {
this.cd.detectChanges();
}
private feedTestData() {
let data = [
{
description: 'line 1',
},
{
description: 'line 2',
},
];
this.gridData.splice(0, 0, data);
}
}
そして次のようなテンプレート:
<GridLayout tkExampleTitle tkToggleNavButton>
<RadListView [items]="gridData">
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical">
<Label [text]="description"></Label>
</StackLayout>
</ng-template>
</RadListView>
</GridLayout>
さらに困惑しているのは、私の実際のアプリケーションでは RadListView が何かを表示しますが、テンプレートを完全に無視して独自に実行します。文字通り RadListView 内に何も残すことはできませんが、それでも項目が表示されます