RadListView 不显示项目

Posted 2023-04-13

【中文标题】RadListView 不显示项目

【英文标题】：RadListView doesn't display items

【发布时间】：2019-05-14 12:35:48

【问题描述】：

在我的应用程序中实现 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 中留下任何内容，但它仍会显示项目

【参考方案1】：

我已经更新了你的 Playground，它现在可以工作了。 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 函数中。