突出顯示列表項並使用Angular2刪除

Question

我有一個項目列表，當用戶點擊一個項目時，該項目會變得高亮。我們通過簡單地添加* ngIf =「object.shouldHeight」並且工作。

我的問題：

當其他項目的用戶點擊，先前所選的項目應該是未加亮

我爲解決第一個想法：

第一個解決方案我認爲是遍歷所有項目，將其狀態更改爲false，然後將當前狀態設置爲true。這將工作！

我爲解決第二個想法：

另一個是使用this，但這不是工作作爲的toogle，意味着，當我點擊下一個項目，前一個仍然突出。

---

我怎樣才能在Angular2實現這一點沒有在我的代碼編寫循環？

---

UPDATE：

我實現了這一點，althought我仍然認爲這可能是更優雅：

在我的部分，我有以下功能：

public showButtonbar(i: number) { 
    this.hightlightStatus = [] 
    this.hightlightStatus[i] = true; 
} 

而且那是我的點擊事件，其中i是索引：

(click)="showButtonbar(i)" 

Answer 1

Bind list item's CSS class，這樣當條件成立時，Angular2添加了CSS類，該類定義了高級項目樣式。

例如爲：

<tr *ngFor="let row of rows; let rowIdx = index;" 
    [class.myhighlight]="rowIdx === highlightRowIdx"> 
</tr> 

上面增加了CSS類myhighlight錶行當行索引等於模型/控制器的highlightRowIdx成員變量。

Answer 2

Here是一個短列表組件指南。這個組件也能夠高亮選中的元素。也許你可以在那裏找到一些幫助。