Nativescript radListView 不显示项目

Posted 2023-04-13

【中文标题】Nativescript radListView 不显示项目

【英文标题】：Nativescript radListView do not show Item

【发布时间】：2018-06-13 04:00:17

【问题描述】：

概述

Nativescript radListView 在 ios 和 android 操作系统上均不显示来自组件的绑定项。 操作栏和通常的 ListView 显示数据，但 radlistview 不显示。 控制台显示没有错误。 但我看到下一个存储库中的 RadListView 可以工作 -> https://github.com/telerik/nativescript-ui-samples-angular

环境

我的开发环境如下。

操作系统：macOS sierra 10.12.6 节点：v6.12.0 npm : 3.10.10 nativescript 和其他可以在 package.json 之后看到

考虑

我似乎这个问题是关于这些... 但我无法提炼。

角度指令 初始化一个可观察数组

代码

在“tns create ui-test --ng”之后，我在 Angular 上实现了 RadListView，如下所示。

组件

export class ItemsComponent implements OnInit 
    private _dataItems: ObservableArray<Item>;

    constructor() 
    

    get dataItems(): ObservableArray<Item> 
        return this._dataItems;
    

    ngOnInit() 
        this._dataItems = new ObservableArray([
             id: 1, name: "Ter Stegen", role: "Goalkeeper" ,
             id: 3, name: "Piqué", role: "Defender" ,
             id: 4, name: "I. Rakitic", role: "Midfielder" 
        ]);
    

html

<ActionBar title="My App" class="action-bar">
</ActionBar>

<GridLayout>
    <RadListView [items]="dataItems">
        <ng-template let-item="item">
            <StackLayout>
                <Label class="nameLabel" text="text"></Label>
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.role"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

package.json

  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": 
    "id": "org.nativescript.uitest",
    "tns-ios": 
      "version": "3.3.0"
    
  ,
  "dependencies": 
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "nativescript-angular": "5.0.0",
    "nativescript-fresco": "^3.0.2",
    "nativescript-intl": "^3.0.0",
    "nativescript-pro-ui": "3.3.0",
    "nativescript-unit-test-runner": "^0.3.2",
    "rxjs": "^5.5.2",
    "tns-core-modules": "3.4.0",
    "zone.js": "~0.8.2"
  ,
  "devDependencies": 
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  

【参考方案1】：

我确实得到了你的代码并放入了 home.component 在 tns 创建 uitest --ng 之后 然后 tns 插件添加 nativescript-ui-listview tns 平台删除 android tns平台添加android tns 构建安卓 tns 运行安卓

如果你不忘记在 home.module.ts 中导入这个模块，它会起作用： NativeScriptUIListViewModule

import  NgModule, NO_ERRORS_SCHEMA  from "@angular/core";
import  NativeScriptCommonModule  from "nativescript-angular/common";
import  NativeScriptUIListViewModule  from "nativescript-ui-listview/angular";

import  HomeRoutingModule  from "./home-routing.module";
import  HomeComponent  from "./home.component";

@NgModule(
  imports: [
    NativeScriptCommonModule,
    HomeRoutingModule,
    NativeScriptUIListViewModule
],
declarations: [
    HomeComponent
],
schemas: [
    NO_ERRORS_SCHEMA
]
)
export class HomeModule  

用这个 item.model.ts

export class Item 
  id: number;
  name:string;
  role: string;

重要

在另一个项目中，直到我在 app.module.ts 中添加这些行之后它才起作用

import  NativeScriptUIListViewModule  from "nativescript-ui-listview/angular/listview-directives";

@NgModule(
imports: [
    ...
    NativeScriptUIListViewModule

【参考方案2】：

您是否尝试过_dataItems 而不是dataItems？看起来您已经定义了一个 itemsource 并在没有 RadListView 中的 _ 的情况下引用了它。

【讨论】：

感谢您的回答。我试过你的方法，但我得到了同样的结果。

【参考方案3】：

我自己解决了。 RadListView 需要一个 getter 和一个 ObservableArray 实现，以及正确的 html 编码。 我没有填写row之类的参数。

但我不明白如何很好地使用 radListView。 现在我遇到了另一个 GridLayout 的 radListView 布局问题。

【讨论】：

不是真的，我也有类似的问题，但据我所知，如果你手动为RadListView 设置一个数据数组来使用它，它会很好地获取该数据，不需要可观察的。