html - 根据给定值更改形状的长度

Question

我设计了一个卡片形状的矩形，它有一个内部整数值，它是从 Angular 模块/类/类型脚本中获得的……我想根据内部值改变形状的高度:该值越大，矩形的高度越长。

到目前为止，这是我的代码

 <div class = "card">
  <div class="content">
   <p id = "name">
     {{Card.lesson.Name}}
   </p>
   <p id = "time">
     {{Card.duration.Hours}}
     <span>
       :
     {{Card.duration.Minutes}}
     </span>
   </p>
  </div>
  <div class = "shape">
  </div>
</div>


 .card
 {
   width : 100px;
   height : 150px;
   background :#FFFFFF;
   border: 1px solid #EEE2FA;
   border-radius : 10px;
   position: relative;

 }

 #name
 {
   position: relative;
   text-align:center;
   font-size:15px;
   top:30px;
 }
#time
{
   position: relative;
   text-align:center;
   font-size:15px;
   top:50px;
}
.shape
{
   position: absolute;
   display: block;
   height:85%;
   width: 3px;
   background-color: blue;
   padding-top: 0px;
   top: 10px;
   border-radius: 4px;
   right: auto;
   left: 8px;
   padding-left: 8px;
}

问题是，我不知道该怎么做。我怎么可能将 Card.Duration.Hours 与卡片的高度联系起来？

Answer 1

您可以使用 ngStyle这样做

你的代码将是这样的:

<div class = "card" [ngStyle]="{'height': Card.duration.Hours + 'px'}">
  <div class="content">
   <p id = "name">
     {{Card.lesson.Name}}
   </p>
   <p id = "time">
     {{Card.duration.Hours}}
     <span>
       :
     {{Card.duration.Minutes}}
     </span>
   </p>
  </div>
  <div class = "shape">
  </div>
</div>

您可以指定自己的单位而不是 px

希望对您有所帮助。