显示/隐藏 - 单击按钮上的内容答案

【问题标题】：Show / Hide - Content on Button Click显示/隐藏 - 单击按钮上的内容
【发布时间】：2017-08-28 02:26:57
【问题描述】：

程序员朋友你好，

我习惯了 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>

打字稿 - 代码

DropdownVar = 0;

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

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

另外，我想为我想要显示的内容制作一个小动画，但我想 css 是要走的路。

【问题讨论】：

stackoverflow.com/questions/35163009/…
stackoverflow.com/questions/39651890/…
plnkr.co/edit/XmDiJX3NhcSptZco2II5?p=preview我刚刚尝试了你所做的并且它正在工作（即使你真的应该使用===）

标签： angular typescript

【解决方案1】：

你可以直接用(click)="DropdownVar=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 中使用 === 而不是 ==

【讨论】：

这些如何回答这个问题？即使 OP 做了什么，ngIf 也应该可以工作。此外，是的，在一般的 javascript 中，您应该使用 === 而不是 ==。否则像：[-1,"chill",true] == "-1,chill,true" 是真的
你能用 angular 2 试试吗？他的问题是“似乎我的 var 获得了正确的值，但我的 *ngif 不起作用。”
我是否正确理解=== 也会检查 var 类型？
@VivekDoshi 我不是说你所做的没有用我只是好奇为什么它适用于=== 而不是==
在 javascript 中，运算符 '==' 只检查相等性和 '===' 检查类型和相等性，是的@YounesM

【解决方案2】：

你可以使用 [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>

在组件中

IsHidden= true;

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

【讨论】：

这不是一个好的答案，[hidden] 隐藏了组件（使用 css），而 ngIf 将它完全从 DOM 中删除。这与 OP 试图做的不匹配。

【解决方案3】：

你可以使用 [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>

在组件中

IsHidden= true;

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

【讨论】：