angular - 显示/隐藏 - 单击按钮时的内容

Question

你好程序员，

我已经习惯了 Angular 2，因此也习惯了 Typescript，所以请宽恕我吧。

我有 5 个按钮，它们应该在单击时启用或禁用内容，例如侧边菜单。

HTML - 代码

  <li class="navigation-items"> 
    <button class="dropdown-header" (click)="onSelect(2)">Link 2</button> 
    <div *ngIf="DropdownVar == 2" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

typescript -代码

DropdownVar = 0;

onSelect(x){
 this.DropdownVar = x;
 console.log(x);
}

似乎我的 var 获得了适当的值，但我的 *ngif 不起作用。有没有更好的方法来处理我的问题？

另外，我想为要显示的内容添加一些动画，但我想 css 是可行的方法。

Answer 1

您可以直接使用(click)="Dropdown War=2" 来完成，不需要onSelect 方法

 <li class="navigation-items"> 
        <button class="dropdown-header" (click)="DropdownVar=2">Link 2</button> 
        <div *ngIf="DropdownVar === 2" class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>

并且在 Angular2 中使用 === 而不是 ==