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”将添加到所有列表项中，这样菜单就会显示在所有项目上，而不仅仅是我点击的那个。如何仅将类(class)添加到所选项目？

我尝试使用 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">