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

标签 javascript angular typescript

我有一个列表,我的最后一个专栏应该像apples"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”,但我也不知道怎么用。

最佳答案

我建议您将所选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">

关于javascript - 如何在ng中选择单击的元素并将类仅添加到所选元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55047668/

相关文章:

javascript - Mongoose - 如何确定查询中是否已经存在嵌套对象?

javascript - AngularJS OrderBy通过ASC

javascript - 无法从公共(public) API 获得响应(在 React.js 中)

javascript - 使用字符串变量访问 JavaScript 模块方法

javascript - IONIC 2 中的分页

Angular 异步工厂提供程序

angular - 如何在 Angular 2 应用程序中正确调用 window.matchMedia()

javascript - Angular JS 2 没有创建 main.js

angular - 无法使用 typescript 和 Angular 为 Jasmine 添加自定义匹配器

generics - typescript - 使用泛型来进行本地存储