每个 App 有多个 NativeScript ListViews

Question

我对 NativeScript 2.0 有以下问题：

我需要在不同的页面上创建两个 ListView，我通过 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"]);
  }

}

Answer 1

在您的情况下，您可以使用page-router-outlet，如文档here 中所述。这将解决您在两页中使用 ListView 时的问题。您还可以查看我的示例项目here，其中已演示了如何执行此操作。