多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，它已經演示瞭如何執行此操作。