如何有条件地设置离子高度？

Question

我想在我的组件上有条件地设置高度，以便在单击时它会展开。但是我无法弄清楚如何有条件地设置高度。

Html 我的组件：

<div class="elements-container">
  <div class="section-text-container">
    <ion-label class="heading-label">
      {{ item.name }}
    </ion-label>
    <ion-label class="label">{{ item.data }}</ion-label>
    <ion-label class="label" *ngIf="item.expanded === true">{{
      item.status
    }}</ion-label>
    <ion-label class="label" *ngIf="item.expanded === true">{{
      item.type
    }}</ion-label>
  </div>
  <ion-icon
    class="item-icon"
    name="chevron-down-outline"
    *ngIf="item.expanded === false"
  ></ion-icon>
  <ion-icon
    class="item-icon"
    name="chevron-up-outline"
    *ngIf="item.expanded === true"
  ></ion-icon>
</div>

css 我的组件：

.elements-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  background: white;
  margin: 0px 5vw 10px 5vw;
  border-radius: 25px;
  border-color: var(--ion-color-primaryBlackGradient);
  border-style: solid;
  border-width: 1px;
  width: 80vw;
  height:89px;
}

如果有人知道，请分享您的想法。

Answer 1

可以通过以下方式完成：

首先从 elements-container css class.
中删除高度

然后在组件的 html 文件中，将其更改为：

<div class="elements-container"
    [style.height]="item.expanded === true ? '150px' : '89px'">

如何有条件地设置离子高度？

How to conditionally set height in ionic?

css

ionic-framework

angular

ionic4