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

对于动画，您可以查看The Guide for Angular Animations

您可以在组件中使用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的样式和时间。上面的代码没有什么特别的动画方面。但那就是你进来的地方，可以应用你想要的任何风格！

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

Plunker

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>

如何绑定按钮以显示和隐藏基于点击

3 个答案:

Plunker