html - Changing the length of a shape based on a given value

Question

I have designed a card-shaped rectangle, that has an inside integer value which is obtained from an angular module/class/type script.... I want to change the height of the shape based on the inside value: the larger the value, the longer the height of the rectangle.

so far, this is my code

 <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;
}

The problem is, I have no Idea how to do so. how can I possibly relate Card.Duration.Hours to the height of the card?

标签： htmlcssangulartypescript

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

希望能帮助到你。