RadListView不显示项目

时间:2018-12-13 10:09:07

标签: angular2-nativescript radlistview

在我的应用程序中实现RadListView遇到很多困难。根据文档,ListView将项目作为ObservableArray接受,但是无论使用该数组还是纯数组,都不会显示项目。我在操场上准备了一个示例应用程序

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中保留任何内容,但仍会显示项目 enter image description here

1 个答案:

答案 0 :(得分:1)

我已经更新了您的游乐场,它现在正在工作。 https://play.nativescript.org/?template=play-ng&id=39xE2X&v=12

您正在尝试访问ng-template中的描述,而该描述应为item.description

<Label [text]="item.description"></Label>

出于测试目的,我还根据您的数据创建一个Onservable数组。 this.gridData = new ObservableArray(data);在feedTestData函数中。