多NativeScript列表视图每个应用

Question

我有NativeScript 2.0以下问题：

我需要创建单独的页面，这是我经过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

在你的情况，因为它是在文档中here描述你可以使用page-router-outlet。这将解决您的问题，同时在两个页面中使用ListView。您也可以查看我的示例项目here，它已经演示了如何执行此操作。