显示/隐藏-按钮上的内容单击 [英] Show / Hide - Content on Button Click

问题描述

您好，程序员

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

这篇关于显示/隐藏-按钮上的内容单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！