每个应用程序多个 NativeScript ListView

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. This will fix your issue while using ListView in two pages. You could also review my sample project here 中所述，其中演示了如何执行此操作。

每个应用程序多个 NativeScript ListView

Multiple NativeScript ListViews per App

listview

nativescript

angular2-nativescript