Несколько NativeScript ListView для каждого приложения

У меня есть следующая проблема с NativeScript 2.0:

Мне нужно создать два ListViews на отдельных страницах, что я и делаю через HTML-файлы.

К сожалению, показывает только первый. Когда я перехожу на вторую страницу, другой ListView не отображается, и в консоли я даже не вижу, как он строит строки из моего шаблона. Когда я возвращаюсь на начальную страницу, ListView также не отображается.

Это происходит, даже если я инициализирую страницы в обратном порядке: первый инициализированный ListView показывает, а второй не работает.

Я предполагаю, что мне нужно уничтожить ListView на странице, с которой я выхожу, чтобы новая правильно инициализировалась, но я не смог найти в документах, как это сделать.

Вот код в tickets.html (первый шаблон)

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

И соответствующий 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");  
  }

}

А вот код в servers.html (второй шаблон):

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

А вот 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"]);
  }

}