typescript 显示/隐藏 - 单击按钮时的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43180943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show / Hide - Content on Button Click
提问by sHamann
Hello fellow programmer,
程序员同学你好
im getting used to Angular 2, therefore Typescript, so have mercy with me.
我已经习惯了 Angular 2，因此也习惯了 Typescript，所以请怜悯我。
I have 5 Buttons which should enable or Disable Content on Click, like a Sidemenu.
我有 5 个按钮，它们应该在单击时启用或禁用内容，例如 Sidemenu。
HTML - Code
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 - Code
打字稿 - 代码
DropdownVar = 0;
onSelect(x){
this.DropdownVar = x;
console.log(x);
}
It seems that my var gets the propper value but my *ngifdoes not work.
Is there a better way to handle my Problem?
似乎我的 var 获得了正确的值，但我的*ngif无效。有没有更好的方法来处理我的问题？
Additional i would like to have a little animation for the Content which i want to show, but i guess css is the way to go.
另外，我想为我想要展示的内容添加一些动画，但我想 css 是要走的路。
回答by Vivek Doshi
You can directly do it with (click)="DropdownVar=2", no need of onSelectmethod
你可以直接用(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>
And use ===instead of ==in Angular2
并在 Angular2 中使用===而不是==
回答by Shiva Prasad
you can use [hidden] instead ngIf
你可以使用 [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>
In Component
在组件中
IsHidden= true;
onSelect(){
this.IsHidden= !this.IsHidden;
}
回答by Gunjan Kumar
you can use [hidden] instead ngIf
你可以使用 [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>
In Component
在组件中
IsHidden= true;
onSelect(){
this.IsHidden=true;
this.IsHidden= !this.IsHidden;
}
