首页 文章

Nativescript radListView不显示Item

提问于
浏览
0

概述

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

环境

我的开发环境如下 .

os:macOS sierra 10.12.6
node:v6.12.0
npm:3.10.10
在package.json之后可以看到nativescript和其他人

考虑

我觉得这个问题是关于这些......
但我无法改进 .

  • angular指令

  • 初始化一个可观察数组

代码

在'tns create ui-test -ng'之后我在角度上实现了RadListView .

Component

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"
  }
}

3 回答

  • 0

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

    如果您不忘记在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;
    }
    

    Important

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

    import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular/listview-directives";
    
    @NgModule({
    imports: [
        ...
        NativeScriptUIListViewModule
    
  • 0

    你试过 _dataItems 而不是 dataItems 吗?看起来你已经定义了一个itemsource并在没有RadListView中的 _ 的情况下引用它 .

  • 0

    我解决了自己 . RadListView需要一个getter和一个ObservableArray实现,并正确的html编码 . 我没有像row一样填充参数 .

    但我不明白如何使用radListView . 现在我遇到了另一个GridLayout的radListView布局 .

相关问题