Динамически изменяйте высоту чартов

Question

Я использую Angular 5 с Chartjs. У меня есть диаграмма, где я хочу, чтобы высота менялась в зависимости от логической переменной (показать). Если true, я хочу, чтобы высота была 25. Если false, я хочу, чтобы высота была 65. Я пробовал это, но это не работает. Как мне изменить высоту условно?

<div  [hidden]="!chart" style="position: relative; float: left; ">
            <canvas id="canvas" width="100" height="{show ? '25':'65'}">{{ chart }}</canvas>
</div>

Answer 1

Это неправильный синтаксис.

height="{show ? '25':'65'}"

Я предполагаю, что вы смешиваете его с React.В Angular сначала нужно обернуть имя реквизита в [], например [height], а справа просто указать выражение JavaScript (вы не оборачиваете его в {}).

[height]="show ? '25px' : '65px'"

Вы также должны указать единицы измерения.

Если вы не хотите указывать единицы измерения, есть альтернативный способ сделать это:

[height.px]="show ? 25 : 65"