Angular2/Nativescript：如何突出顯示ListView的選定項目？

我已經通讀了Nativescript ListView文檔並搜索了Google，並且找不到任何方法來突出顯示Listview中當前選定的項目......這甚至有可能嗎？如果是這樣，我該怎麼辦？Angular2/Nativescript：如何突出顯示ListView的選定項目？

我的代碼：

<ListView [items]="activeStockTakes" class="list-group" (itemTap)="selectActiveStockTake($event)"> 
        <template let-activeStockTake="item"> 
         <StackLayout> 
          <Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label> 
         </StackLayout> 
        </template> 
       </ListView>

來源

2017-03-07 user2094257

我有同樣的問題，埃迪的答案幫助我解決。

2 CSS類：Selected和Unselected。

通過向模板添加let-i =「index」來獲取listview元素索引。

設置默認類與類=「未選定」

使用數據綁定有條件地更改類所選擇的列表視圖項[class.Selected] =「我===的selectedIndex」

飼料（tap）=「selectMenu（i）」的組件的索引

在您的組件中，創建變量selectedIndex並將其設置爲等於所選元素的索引。

點擊一個元素現在將改變它的CSS類。如果您選擇了一個元素並點擊列表中的其他元素，則新元素將被選中，並且第一個選擇將變爲未選中狀態。

CSS

<ListView [items]="submenu"> 
     <template let-item="item" let-i="index"> 
      <Label [class.Selected]="i===selectedIndex" [text]="item" class="Unselected" (tap)="selectMenu(i)"></Label> 
     </template> 
    </ListView>

selectedIndex: number; 

selectMenu(i) { 
    this.selectedIndex=i; 
}

來源

2017-05-02 20:30:55 user3298333

非常感謝我已經放棄在這很久以前！完美的作品:)我在你的代碼中注意到的一件事情是：爲什麼在你設置this.selectedIndex的函數中，你是否首先將i的值複製到變量索引中，而不是僅使用i來設置selectedIndex？再次感謝！！！ – user2094257

我的應用程序使用2個變量來處理不同的事情，當我刪除了我的非相關代碼的答案，我忘了拿走其中的一個。很高興我能幫上忙！ – user3298333

當然可以！

定義的CSS類「亮點」：

.highlight { 
    background-color: #eee; 
}

然後分配給它的基礎上視圖中的條件：

<StackLayout [class.highlight]="selectedItem && activeStockTake.UserCode === selectedItem.UserCode">

這selectedItem屬性在組件定義和分配/更新在列表中挑選物品時。

來源

2017-03-07 15:29:56

不適合我出於某種原因......我在我的組件selectActiveStockTake有一個函數（參數）的設置selectedActiveStockTake每次項目獲取在ListView中點擊，所以我用selectedActiveStockTake替換了selectedItem在你的代碼中...我是否正確理解這一點？謝謝參觀。 – user2094257

我使用ccore-dark主題，所以也許這是重寫高亮班？我嘗試添加！重要但不會改變。它似乎正在工作，因爲沒有錯誤，但它只是不顯示，由於某種原因... – user2094257

Angular2/Nativescript：如何突出顯示ListView的選定項目？

回答

相關問題