angularnativescriptradlistview

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

Solution

  • 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.