如何在 ng for 中选择单击的元素并将类仅添加到所选元素？

Question

我有一个列表，我的最后一列应该像苹果"more options icon"，这样会弹出一个带有其他选项的下拉列表。

<tr *ngFor="let foo of bars">
            <td>{{foo.id}}</td>
            <td>{{foo.name}}</td>
            <td class="more-options-menu">
              <i class="icon i-menu" (click)="toggleOptionsMenu()"></i>
              <div id="more-options-{{foo.id}}" [className]="!toggleOptions ? 'more-options-menu-content' : 'more-options-menu-content show-menu'">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </td>
          </tr>

我遇到的问题是，如果我单击列表中的一项，css 类“show-menu”会添加到所有列表项中，以便菜单显示在所有项目上，而不仅仅是我点击的那个。如何仅将课程添加到所选项目？

我尝试使用 id “more-options-xx”，但我也不知道如何使用。

Answer 1

我建议您将所选 id 作为组件上的单独属性进行跟踪。例如：

selectedId = null;
toggleOptionsMenu(id) {
  this.selectedId = id;
}

在您的模板中：

<i class="icon i-menu" (click)="toggleOptionsMenu(foo.id)"></i>
<div id="more-options-{{foo.id}}" class="more-options-menu-content"
  [class.show-more]="foo.id === selectedId">