如何有條件地設置離子高度？

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

它可以通過以下方式完成：

• 首先從元素容器 css 類中刪除高度。

• 然后在組件的 html 文件中，像這樣更改它：

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