1

アプリケーションに 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 内に何も残すことはできませんが、それでも項目が表示されます ここに画像の説明を入力

4

1 に答える 1