显示/隐藏

本文介绍了显示/隐藏-按钮上的内容单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

您好，程序员

我已经习惯了Angular 2，因此是Typescript，所以请对我宽恕.

im getting used to Angular 2, therefore Typescript, so have mercy with me.

我有5个按钮，应该可以启用或禁用点击内容，例如侧面菜单.

I have 5 Buttons which should enable or Disable Content on Click, like a Sidemenu.

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获得了适当的值，但是我的*ngif无法正常工作. 有没有更好的方法来解决我的问题?

It seems that my var gets the propper value but my *ngif does not work. Is there a better way to handle my Problem?

另外，我想为要显示的内容制作一些动画，但是我想CSS是一种方法.

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.

推荐答案

您可以直接使用(click)="DropdownVar=2"进行操作，而无需使用onSelect方法

You can directly do it with (click)="DropdownVar=2" , no need of onSelect method

<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中使用===代替==

And use === instead of == in Angular2