Nativescript-angular: ListView is not populating the list

[tsonevn]

_From @niranjans3ln on September 9, 2016 11:50_

Hi,
I have replicated Groceries app and am doing my own implementation of the same. For the past 2 days I am not able to see the list of items on the ListView. Here is my code. It was working just fine until yesterday and since then it is not. I even tried with some test data "testList" but it is not working. I tried to print the size of the list and it shows the actual size i.e., 8 but the underlying values. I suspect my ListView or template tag has to do something with this. Please help.

HTML:

<GridLayout rows="auto, auto, *">
  <GridLayout row="0" columns="*" class="header-list-page">
    <Label text="Select the Gadgets....."></Label>
    <Image src="res://add" col="1"></Image-->
  </GridLayout>
  <GridLayout row="1"> 
    <Label [text]='"     " + itemsList.length + " Items Found."' class="header-of-list"></Label>
  </GridLayout>
  <ListView [items]="itemsList" row="2" class="small-spacing">
    <template let-item="item">
      <Label [text]="item.id" class="medium-spacing"></Label>
    </template>
  </ListView>
</GridLayout>

TS CODE:

import {Component, ChangeDetectionStrategy, EventEmitter, Input, Output, ElementRef, OnInit, ViewChild} from "@angular/core";
import {Item} from "../../shared/ItemsList/item";
import {ItemsListService} from "../../shared/itemsList/itemslist-service";
import {TextField} from "ui/text-field";
import {Config} from "../../shared/config";
import {Http, Headers} from "@angular/http";
import {Observable} from "rxjs/Observable";

@Component({
  selector: "list",
  templateUrl: "pages/list/listview.html",
  styleUrls: ["pages/list/list-common.css", "pages/list/list.css"],
  providers: [ItemsListService]
})

export class ListPage implements OnInit {
  itemsList: Array<Item> = [];
  testList: Array<any> = [];
  @ViewChild("itemsToAddField") itemsToAddField: ElementRef;

  constructor(private _itemsListService: ItemsListService, private _http: Http) {
    this.testList.push({name: "Niranjan"});
    this.testList.push({name: "Lokanath"});
    this.testList.push({name: "Santoshi"});
    this.testList.push({name: "Bobby"});
    this.testList.push({name: "Mommy"});
    this.testList.push({name: "Delisha"});
  }

  ngOnInit() {
    this._http.get(Config.apiUrl + "itemsList")
    .map(res => res.json())
    .subscribe(loadedItems => {
      let jsonObj = JSON.parse(loadedItems);
      jsonObj.forEach((item) => {
        this.itemsList.unshift(item);      });
    });
  }
}

_Copied from original issue: NativeScript/NativeScript#2697_

[tsonevn]

Hi @niranjans3ln

Thank you for writing to us.

I reviewed your scenario, however I was unable to reproduce any problem related with the ListView , while using NativeScirpt Angular2 template. In regard to that you could review this article in the documentation and the attached sample code.

app.component.html

<StackLayout>
    <GridLayout rows="auto, auto, *">
        <GridLayout row="0" columns="*" class="header-list-page">
            <Label text="Select the Gadgets....."></Label>
            <Image src="res://icon" col="1"></Image>
        </GridLayout>

        <GridLayout row="1"> 
            <Label [text]='"     " + itemsList.length + " Items Found."' class="header-of-list"></Label>
        </GridLayout>

        <ListView [items]="itemsList" row="2" class="small-spacing">
            <template let-item="item">
                <Label [text]="item.name" class="medium-spacing"></Label>
            </template>
        </ListView>
    </GridLayout>
</StackLayout>

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    itemsList: Array<any> = [];

    constructor(){
        this.itemsList.push({name: "Niranjan"});
        this.itemsList.push({name: "Lokanath"});
        this.itemsList.push({name: "Santoshi"});
        this.itemsList.push({name: "Bobby"});
        this.itemsList.push({name: "Mommy"});
        this.itemsList.push({name: "Delisha"});
    }
}

It would help if you could give us some more info about the problem or to send us sample project which could be debugged locally.

Regards,
@tsonevn

[niranjans3ln]

My MongoDB is at https://github.com/niranjans3ln/GadgetStore/tree/master/sample-Groceries/admin

And my Microservice is at: https://github.com/niranjans3ln/GadgetStore/tree/master/sample-Groceries/shoppingcart

NS Code is at: https://github.com/niranjans3ln/GadgetStore/tree/master/sample-Groceries/

Hope this helps... Please note that the URL is configured in "config.ts" file.

[tsonevn]

Hi @niranjans3ln,

I reviewed your project and found that you have set ListView to be with opacity:0;. This will hide the ListView and will not be displayed on the screen. To fix this you should remove from pages/list/list-common.css file the following lines:

ListView {
  background-color: transparent;
  opacity: 0;
}

I hope this will help.

[niranjans3ln]

Thanks a lot. It fixed the problem.