CODEWITHSUNDEEP
angularnativescriptradlistview
Kaname
Kaname

Reputation: 51

Nativescript radListView do not show Item

Overview

Nativescript radListView does not show bind item from component on both ios and android os.
Action bar and usual ListView shows data but radlistview do not. Console shows no error. But I saw RadListView from next repository can work -> https://github.com/telerik/nativescript-ui-samples-angular

Environment

My development environment is below.

os: macOS sierra 10.12.6
node : v6.12.0
npm : 3.10.10
nativescript and others can be seen after, at package.json

Consideration

I seems this problem is about these...
but I can not refine.

  1. angular directive
  2. initializing an observable array

Code

I implemented RadListView on angular like below just after 'tns create ui-test --ng'.

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

Upvotes: 2

Views: 2380

Answers (3)

Stephane
Stephane

Reputation: 51

I did get your code and put in the home.component After the tns create uitest --ng then tns plugin add nativescript-ui-listview tns platform remove android tns platform add android tns build android tns run android

It works if you don't forget to import this module in the 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 { }

with this item.model.ts 

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

Important

In one another project, it didn't work until I add theses lines in the app.module.ts 

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

@NgModule({
imports: [
    ...
    NativeScriptUIListViewModule

Upvotes: 5

Kaname
Kaname

Reputation: 51

I solved myself. A RadListView require a getter and an ObservableArray implementation, and correct html coding. I didn't fill parameters like row.

But I don't understand how to use a radListView well. Now I'm in trouble for a radListView layout with another GridLayout.

Upvotes: 0

Hyper Tenso
Hyper Tenso

Reputation: 1

Have you tried _dataItems instead of dataItems? It looks like you've defined an itemsource and referenced it without the _ in RadListView.

Upvotes: 0

Related Questions