Функция TypeScript для установки высоты в NgStyle не работает

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

Вам также понадобится px в html-файле, например:

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

Answer 3

Проблема в том, что вы не устанавливаете какой-либо блок на свой рост ... это как "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-кавычки .