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

各位程序员好

我已经习惯了Angular 2，所以是打字稿，所以饶了我吧

我有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>

似乎我的var得到了propper值，但我的

*ngif

不起作用。 有没有更好的办法来处理我的问题

---

另外，我想为我想展示的内容制作一点动画，但我想css是最好的选择。

您可以直接使用

（单击）=“DropdownVar=2”

，无需选择

方法

 <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>


链接2


在Angular2中使用
===
而不是
=
，您可以使用[hidden]来代替ngIf

<li class="navigation-items"> 
<button class="dropdown-header" (click)="onSelect()">Link 2</button> 
<div  class="dropdown-content" [hidden]="IsHidden">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

<li class="navigation-items"> 
    <button class="dropdown-header" (click)="onSelect()">Link 2</button> 
    <div  class="dropdown-content" [hidden]="IsHidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>

您可以使用[hidden]代替ngIf

<li class="navigation-items"> 
<button class="dropdown-header" (click)="onSelect()">Link 2</button> 
<div  class="dropdown-content" [hidden]="IsHidden">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

<li class="navigation-items"> 
    <button class="dropdown-header" (click)="onSelect()">Link 2</button> 
    <div  class="dropdown-content" [hidden]="IsHidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>

我刚刚尝试了你所做的事情，它正在发挥作用（即使你真的应该使用
==
），这些问题是如何回答的？ngIf应该和OP一样工作。此外，是的，在javascript中，通常应该使用
==
而不是
=
。否则像：
[-1，“chill”，true]=“-1，chill，true”
这样的东西都是真的，你能用angular 2试试吗？他的问题是“似乎我的var得到了propper值，但我的*ngif不起作用。”我是否正确理解
==
也会检查var类型？@VivekDoshi我不是说你做的不起作用，我只是好奇为什么它在javascript中与
==
一起工作，而不是
=
，运算符“==”仅检查相等，而“==”检查类型和相等，yes@younesm这不是一个好答案，
[隐藏]
隐藏组件（使用css），而
ngIf
将其从DOM中完全移除。这跟OP想做的不一样。
IsHidden= true;

onSelect(){
this.IsHidden=true;
 this.IsHidden= !this.IsHidden;
}