Question

您好我正在开发Angular 2中的Web应用程序。我有一个下拉控件。在java脚本中它工作正常。我试图在Angular 2中重写它。下面是我的HTML代码。

<div class="btn-group" (click)="toggleDropdown()">
          <button class="btn-toggle" style="width:151px;" type="button" >Select USer Role</button>
                  <ul class="dropdown-menu" role="menu" style="width:100%;">
                      <li *ngFor="let userrole of userroles; let i = index" [value]="userrole.userroleid">
                          <div style="margin-left:3px">
                               <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17"> {{userrole.username}}</label>
                           </div>
                       </li>
                  </ul>
</div>

点击btn-group后，我试图在java脚本中将下一个类添加到下拉菜单中。

 $(".btn-toggle").on("click", function () {
     $('.dropdown-menu').toggleClass('open');

我尝试如下。我添加了click事件（click）=＆＃34; toggleDropdown（）＆＃34;。在TS文件中我添加了

toggleDropdown() {
        this._showStyle = true;
  }

然后我在html中添加了以下代码。

[ngClass]="{'open': _showStyle }"

这很好用。当我在Javascript中编写下面的代码时，我正在努力删除样式。

  $(".dropdown-menu li").on("click", function () {

                $('.btn-toggle').text($(this).text());
                $('.dropdown-menu').removeClass('open');
            });

我试图在Angular 2中写上面的声明。有人可以帮助我做这个工作吗？任何帮助，将不胜感激。谢谢

Answer 1

您可以创建一个布尔值。例如，let isDropDownOpen = false;

然后函数将是：

toggleDropdown() {
   return !this.isDropDownOpen;
}

然后在html中，您可以执行以下操作：

<ul class="dropdown-menu" role="menu" style="width:100%;" [ngClass]="{'open': isDropDownOpen}">
</ul>

如何在Angular 2中添加样式？

1 个答案: