突出显示列表项并使用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是一个短列表组件指南。这个组件也能够高亮选中的元素。也许你可以在那里找到一些帮助。