TypeScript function to set height in NgStyle does not work

Question

I have designed a shape and I want to determine its height based on a TypeScript-function, but the ngStyle does not apply the height to the shape.

HTML:

<div class = "card" [ngStyle] = "{'height': CalculateHeight()}" (click) = 'onSelect()'>

Function:

CalculateHeight(): number {
  let CardHeight = ((this.Card.duration.Hours * 60) +
    (this.Card.duration.Minutes)) * 2;

  if (CardHeight <= 60) {
    CardHeight = 60;
  }

  console.log(CardHeight);

  return CardHeight;
}

What is the problem?

Answer 1

CalculateHeight只返回一个数字。但height要正常工作，也需要有unit。

尝试以下行。

< div class = "card" [ngStyle] = "{'height.px': CalculateHeight()}" (click) = 'onSelect()' >

注意.px。它会解决问题。

或者。您可以CalculateHeight返回一个带有高度单位的字符串。例如400px。