javascript - 如何在 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">