Question

我已经设计了形状，并希望根据TypeScript函数确定其高度，但是ngStyle并没有将高度应用于形状。

HTML：

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

功能

：

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

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

  console.log(CardHeight);

  return CardHeight;
}

出什么问题了？

Answer 1

CalculateHeight仅返回一个数字。但是height才能正常工作，还需要unit。

尝试以下一行。

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

请注意 .px 。会成功的。

或。您可以使CalculateHeight返回一个字符串，末尾附加高度单位。例如 400px 。

Answer 2

问题是您没有将任何单位设置为高度。例如“ 300什么？鸡蛋？汽车？像素？” ：P

只需以有效单位返回结果即可。只需在返回值中添加+ 'px'即可完成此操作：

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

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

  console.log(CardHeight);

  return CardHeight + 'px';
}

您还应该将HTML从(click)='onSelect()'更改为(click)="onSelect()"，因为在引用属性值时，建议使用双引号而不是单引号。

要了解更多信息，请查看推荐的style-rules，尤其是HTML Quotation Marks。

Answer 3

您还需要在html文件中添加px

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

在NgStyle中设置高度的TypeScript函数不起作用

3 个答案: