Nativescript: ListView items show up as [object object]

[spbond]

Which platform(s) does your issue occur on?

iOS
Android has not been tested

Please provide the following version numbers that your issue occurs with:

• CLI: 3.1.2
• Cross-platform modules: 3.1.0
• Runtime(s):
  tns-ios: 3.1.0
• Plugin(s):

  "dependencies": {
    "@angular/animations": "^4.0.3",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "^4.0.3",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/platform-server": "~4.0.0",
    "@angular/router": "~4.0.0",
    "Pusher-imports": "file:Pusher-imports",
    "nativescript-angular": "^3.0.0",
    "nativescript-geolocation": "^3.0.0",
    "nativescript-google-mobile-ads-sdk": "^1.0.5",
    "nativescript-intl": "^3.0.0",
    "parse5": "^1.3.2",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.2.0",
    "system-sleep": "^1.0.0-f",
    "tns-core-modules": "^3.1.0",
    "tns-platform-declarations": "^3.0.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.10.4",
    "babel-types": "6.11.1",
    "babylon": "6.8.4",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.4.2",
    "typescript": "~2.3.2"
  }

Please tell us how to recreate the issue in as much detail as possible.

I had a ListView which was working properly. After upgrading NativeScript, all items in the list view began rendering as [object object]. I have tried both template and ng-template, since I read that template is deprecated. I reduced the template to a simple Label element with a hard-coded string for the text attribute, and it will show the correct number of elements, but they are still displayed as [object object]. The ios debugger in xcode shows the Label element as a TNSLabel with \

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Template:

    <ListView #quakes_history
        [items]        = "quakes"
        separatorColor = "transparent"
        (itemLoading)  = "onItemLoad($event)" >
        <ng-template let-quake = "item">
                <Label id = "magnitude"
                    text    = "quake.magnitude"
                    class  = "font-xl" >
                </Label>
        </ng-template>
    </ListView>

Code to populate Array:

import { Component }     from "@angular/core";
import { Router     }     from "@angular/router";
import { Page       }     from "ui/page";
import { Quake, quake_list     } from "../../data-types/quake";

@Component ({
    selector    : "quakes-page",
    templateUrl : "pages/quakes/quakes.html",
    styleUrls   : [ "pages/quakes/quakes-common.css", "pages/quakes/quakes.css" ]
})

export class QuakesPage {
    public quakes : Array<Quake> = [];

    constructor( private router: Router, private page: Page ) {
        for ( let quake of quake_list.slice() ) {
            this.quakes.push( quake );
        }
    }
}

[spbond]

I needed to import NativeScriptModule and include it in the module imports in my main file. I would like to point out that for something which is apparently necessary for ListView to work, it is very poorly documented. I did not find any reference to it in any of the official examples that I came across.

[velchev]

@spbond I had the same issue, thanks for asking and yes I absolutely agree. the documentation and examples are not explaining this at all.

[jrojano2]

I also had the same issue, but with the RADLISTVIEW. I solved it importing NativeScriptUIListViewModule in my main module.

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

@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptUIListViewModule,

[malaotou]

when using lazy loading, it still not work,but change no lazy loading ,it will work, how to using lazy loading?
{ path: "home", loadChildren: "./modules/home/home.module#HomeModule" },

[ludcila]

Hi @malaotou, I was facing the same issue and was able to solve it by adding the following import to the lazy loaded module:

import { NativeScriptCommonModule } from "nativescript-angular/common";

...

imports: [
    ...
    NativeScriptCommonModule,
    ...
]

Prior to version 5.3.0 of nativescript-angular it should have worked by importing NativeScriptModule as indicated by @spbond (see https://github.com/NativeScript/nativescript-angular/blob/master/CHANGELOG.md)

[kittisakjitmon]

Hi @malaotou, I was facing the same issue and was able to solve it by adding the following import to the lazy loaded module:

import { NativeScriptCommonModule } from "nativescript-angular/common";

...

imports: [
    ...
    NativeScriptCommonModule,
    ...
]

Prior to version 5.3.0 of nativescript-angular it should have worked by importing NativeScriptModule as indicated by @spbond (see https://github.com/NativeScript/nativescript-angular/blob/master/CHANGELOG.md)

this WORK!

[fagainv]

Thanks. I had the same issue on version 4.2.0 and I solved it importing NativeScriptModule.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.