如何绑定按钮以根据单击显示和隐藏

Question

我有一个标题（标题）列表，每个标题都有段落...我为此创建了一个列表，以便它有一个右侧带有图标的按钮。单击按钮时，显示段落，再次单击时应将其隐藏回原处。

在第一次单击时显示它，但我不知道当它再次单击时如何将其隐藏回来。

到目前为止，我已经做了这样的事情：

。.html：

<ion-list no-lines>
  <button ion-item (click)="itemClicked()">
    <h2>About {{details.company.data.company_name_en}}</h2>
     <ion-icon name="ios-arrow-down" item-right></ion-icon>
  </button>
  <div [style.visibility]= "toggoleShowHide">
    <p dir="auto" >
      {{details.company_profile}}
    </p>
  </div>
</ion-list>

.ts：

itemClicked(){
this.toggoleShowHide= 'visible';
}

此外，<div>标签的空间也没有隐藏.....如果有人可以建议如何正确制作动画.....单击时，列表应随内容展开，然后在再次单击时收缩。

Answer 1

对于动画，您可以查看角度动画指南

将animations用于组件的位置，并且可以将不同的样式应用于动画。

对于动画，您可以使用[@triggerName]（根据需要命名）将动画附加到元素，这是由单击事件触发的。然后在组件中添加逻辑 animations ，因此它可能看起来像这样：

  animations: [
    trigger('openClose', [
      state('collapsed, void',
        style({ height:"0px"})),
      state('expanded',
        style({ height:"*" })),
      transition("collapsed <=> expanded", [
        animate(500, style({ height: '250px'})),
        animate(500)
      ])
    ])
  ]

在此示例中，我们在 collapsed 和 expanded 之间切换状态，并应用样式和计时 openClose .上面的代码在动画方面没有任何特殊作用。但这就是你进来的地方，可以应用你想要的任何风格！

这是一个简单的工作示例：

普伦克

Answer 2

您可以使用 [hidden]="true/false" 指令

TS：

this.toggoleShowHide = true;
itemClicked(){
  this.toggoleShowHide = !this.toggoleShowHide;
}

.html：

<div [hidden]= "toggoleShowHide">
    <p dir="auto" >
      {{details.company_profile}}
    </p>
  </div>

Answer 3

这可以在 html 本身中处理

<ion-list no-lines>
 <button ion-button clear item-end class="roundButton" (click)="viewType = !viewType">
  <h2>About {{details.company.data.company_name_en}}</h2>
   <ion-icon name="ios-arrow-down" item-right></ion-icon>
 </button>
 <ion-item *ngIf="viewType">
  <ion-input type="text" value=""></ion-input>
 </ion-item>
</ion-list>