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

【问题标题】：Highlight list item and remove with Angular2突出显示列表项并使用 Angular2 删除
【发布时间】：2016-12-08 03:43:34
【问题描述】：

我有一个项目列表，当用户点击一个项目时，该项目会被突出显示。我们通过简单地添加 *ngIf="object.shouldHeight" 来做到这一点，然后就可以了。

我的问题：

当用户点击另一个项目时，之前选择的项目应该不高亮

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

我想到的第一个解决方案是遍历所有项目，将它们的状态更改为false，然后将当前状态设置为true。这会奏效！

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

另一个是使用this，但这不能用作toogle，这意味着当我单击下一个项目时，前一个仍然突出显示。

如何在 Angular2 中实现这一点而不在我的代码中编写循环？

更新：

我做到了，虽然我仍然认为它可以更优雅：

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

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

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

(click)="showButtonbar(i)"

【问题讨论】：

标签： angular

【解决方案1】：

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

例如：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：