突出显示列表项并使用Angular2删除

Question

我有一个项目列表，当用户点击某个项目时，此项目会被高亮显示。我们通过简单地添加 * ngIf =“object.shouldHeight”来做到这一点。

我的问题：

当用户点击其他商品时，之前选择的商品应不突出显示

我对解决方案的第一个想法是：

我认为第一个解决方案是迭代所有项目，将其状态更改为false，然后将当前状态设置为true。这样可行！

我对解决方案的第二个想法：

另一个是使用this，但这不适用于谷歌，意味着，当我点击下一个项目时，前一个项目仍然会突出显示。

如何在 Angular2 中实现此功能而无需在代码中编写循环？

更新

我实现了这一点，虽然我仍然认为它可以更优雅：

在我的组件中，我有以下功能：

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

这是我的点击事件，其中 i 是索引：

(click)="showButtonbar(i)"

Answer 1

Bind list item's CSS class，这样当条件为真时，Angular2会添加CSS类，它定义了高级项目样式。

E.g：

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

当行索引等于模型/控制器的myhighlight成员变量时，上面将CSS类highlightRowIdx添加到表行。

Answer 2

Here是一个简短的列表组件指南。该组件还能够高亮显示所选元素。也许你可以在那里找到一些帮助。