I have the following issue with NativeScript 2.0:
I need to create two ListViews on separate pages, which I do through HTML files.
Unfortunately, only the first one shows. When I navigate to the second page, another ListView does not show and in the console I do not even see it building rows from my template. When I navigate back to the initial page, the ListView there also does not show.
It happens even if I initialize pages in reverse order: the first initialized ListView shows, and the second one does not work.
I assume that I need to destroy the ListView on the page that I exit, for the new one to properly initialize, but I was unable to find in the docs how to do so.
Here is the code in tickets.html (first template)
<ListView id="lv1" [items]="ticketsList" [class.visible]="listLoadedT">
<template let-item="item">
<DockLayout stretchLastChild="true">
<Label text="-" dock="left" width="20" [style]="itemStyleT(item.priority)"></Label>
<GridLayout rows="*,*,*" columns="*">
<Label row="0" col="0" [text]="item.subject.trim()"></Label>
<GridLayout row="1" col="0" rows="*" columns="auto,*">
<Label row="0" col="0" text="from:" class="verysmalltext gray"></Label>
<Label row="0" col="1" [text]="item.name.trim() + '(' + item.email.trim() + ')'" class="smalltext"></Label>
</GridLayout>
<GridLayout row="2" col="0" rows="*" columns="*,*,*">
<GridLayout row="0" col="0" rows="*" columns="auto,*">
<Label row="0" col="0" text="status:" class="verysmalltext gray"></Label>
<Label row="0" col="1" [text]="item.status.trim()" class="smalltext"></Label>
</GridLayout>
<GridLayout row="0" col="1" rows="*" columns="auto,*">
<Label row="0" col="0" text="created:" class="verysmalltext gray"></Label>
<Label row="0" col="1" [text]="item.created.trim()" class="smalltext"></Label>
</GridLayout>
<GridLayout row="0" col="2" rows="*" columns="auto,*">
<Label row="0" col="0" text="last reply:" class="verysmalltext gray"></Label>
<Label row="0" col="1" [text]="item.lastreplied.trim()" class="smalltext"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</DockLayout>
</template>
</ListView>
And the relevant tickets.component.ts:
import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import {Ticket} from "../../shared/ticket/ticket";
import {TicketService} from "../../shared/ticket/ticket.service";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Color} from "color";
import {View} from "ui/core/view";
import {Config} from "../../shared/config";
@Component({
selector: "my-app",
providers: [TicketService],
templateUrl: "pages/tickets/tickets.html",
styleUrls: ["pages/tickets/tickets-common.css", "pages/tickets/tickets.css"]
})
export class TicketsPage implements OnInit {
ticketsList: Array<Ticket> = [];
isLoadingT = false;
listLoadedT = false;
constructor(private _router: Router, private _ticketService: TicketService, private page: Page) {}
ngOnInit() {
this.isLoadingT = true;
this.page.actionBarHidden = true;
this._ticketService.load()
.subscribe(loadedTickets => {
loadedTickets.forEach((ticketObject) => {
this.ticketsList.push(ticketObject);
});
this.isLoadingT = false;
this.listLoadedT = true;
});
}
goToServers() {
this._router.navigate(["ServersPage"])
}
goToOptions() {
alert ("Options");
}
}
And here is the code in the servers.html (second template):
<ListView [items]="serversList" [class.visible]="listLoadedS">
<template let-item="item">
<GridLayout rows="auto,auto" columns="*">
<GridLayout rows="auto" columns="3*,*,2*">
<Label row="0" col="0" [text]="item.host"></Label>
<Label row="0" col="1" [text]="item.state"></Label>
<Label row="0" col="2" [text]="item.downtime"></Label>
</GridLayout>
<Label row="1" col="0" [text]="item.text" class="smalltext gray"></Label>
</GridLayout>
</template>
</ListView>
And here is servers.component.ts:
import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import {Server} from "../../shared/server/server";
import {Stat} from "../../shared/server/server";
import {ServerService} from "../../shared/server/server.service";
import {Router} from "@angular/router-deprecated";
import {Page} from "ui/page";
import {Color} from "color";
import {View} from "ui/core/view";
import {Config} from "../../shared/config";
@Component({
selector: "my-app",
providers: [ServerService],
templateUrl: "pages/servers/servers.html",
styleUrls: ["pages/servers/servers-common.css", "pages/servers/servers.css"]
})
export class ServersPage implements OnInit {
serversList: Array<Server> = [];
serversStats = new Stat('','');
isLoadingS = false;
listLoadedS = false;
refreshText = String.fromCharCode(0xf021);
constructor(private _router: Router, private _serverService: ServerService, private page: Page) {}
ngOnInit() {
this.isLoadingS = true;
this.page.actionBarHidden = true;
this._serverService.load()
.subscribe(loadedServers => {
loadedServers.List.forEach((serverObject) => {
this.serversList.push(serverObject);
});
this.serversStats.hosts_up = loadedServers.Stats.hosts_up;
this.serversStats.hosts_down = loadedServers.Stats.hosts_down;
this.isLoadingS = false;
this.listLoadedS = true;
});
}
goToTickets() {
this._router.navigate(["TicketsPage"])
}
goToOptions() {
alert ("Options");
//this._router.navigate(["OptionsPage"]);
}
}
