NativeScript Angular ListView Rendering [object Object]

Question

I'm trying to play a ListView in Nativescript + Angular and I can not render the defined template. My ListView is showing [object Object] instead of the template. I always get that result. If the items in my array are a String, the text is displayed on the line, if it is an object it insists on not showing my template and displaying [object Object].

The result I get is this:

Below is my code

eventos.component.ts

import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';


@Component({
  selector: "PrincipalEventosListView",
  templateUrl: "pages/principal/eventos/eventos.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class PrincipalEventosComponent  {

  public registros: Array<any>;

    constructor() {

        this.registros = [];
        this.registros.push({tipo: "Teste 1"});
        this.registros.push("String no lugar de objeto.");
        this.registros.push({tipo: "Teste 3"});
        this.registros.push(123);
        this.registros.push({tipo: "Teste 4"});
    }

}

eventos.component.html

<GridLayout>

<ListView [items]="registros">
    <template let-item="item">
        <Label [text]="item.tipo"></Label>
    </template>
</ListView>

looking at your code this should work as expected.. see this as a reference github.com/NativeScript/nativescript-sdk-examples-ng/blob/… also check your package.json versions of all angular related dependencies and rebuild your app. — Nick Iliev
– Nick Iliev, Commented Dec 9, 2016 at 7:41

bobby nguyen · Accepted Answer · 2016-12-25 13:13:03Z

6

I had the same issue, I fix it by including import { NativeScriptModule } from "nativescript-angular/platform"; in the module containing the list.

answered Dec 25, 2016 at 13:13

bobby nguyen

612 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

msenne · Accepted Answer · 2018-06-25 15:35:23Z

1

Using NativeScript 4.1.1:

You do need this in the app.module:

import { NativeScriptModule } from "nativescript-angular/nativescript.module";

But then in the specific module referencing the ListView you need to import this:

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

I'm using RadListView, but I think this may apply to the normal ListView as well.

answered Jun 25, 2018 at 15:35

msenne

6135 silver badges9 bronze badges

Comments

Yuriy Khan · Accepted Answer · 2019-02-02 14:14:02Z

0

As for now, you need import NativeScriptCommonModule from 'nativescript-angular/common' to containing module.

answered Feb 2, 2019 at 14:14

Yuriy Khan

5414 silver badges5 bronze badges

Comments

Himanshu · Accepted Answer · 2018-06-19 09:36:42Z

-1

In NativeScript 4.1.0 you have to include this module

import { NativeScriptModule } from "nativescript-angular/nativescript.module";

and add it to the imports

@NgModule({
  ...
  imports: [NativeScriptModule],
  ...
})

edited Jun 19, 2018 at 9:36

Himanshu

12.8k9 gold badges49 silver badges63 bronze badges

answered Jun 19, 2018 at 8:56

Andrey Pelykh

134 bronze badges

Collectives™ on Stack Overflow

NativeScript Angular ListView Rendering [object Object]

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related