Question

Hello其他程序员，

我习惯了Angular 2，因此打字稿，所以请怜悯我。

我有5个按钮，可以启用或禁用点击内容，如Sidemenu。

HTML - 代码

DropdownVar = 0;

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

打字稿 - 代码

*ngif

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

其他我想为我要展示的内容制作一些动画，但我猜css是要走的路。

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

Answer 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;
}

Answer 3

您可以使用[hidden]代替ngIf

const data = [ {a: true}, {b: false}, {c: true}];
const filteredTrueItems = data.filter(obj => obj[Object.keys(obj)[0]] === true)
filteredTrueItems.push({ d: true });

在组件中

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

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

3 个答案: