Question

我设计了一个卡形矩形，它具有一个内部整数值，该值是从角度模块/类/类型脚本中获取的...。我想根据内部值更改形状的高度：值越大，矩形的高度越长。

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

 <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

希望有帮助。

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

1 个答案: