时间戳

首页 > 解决方案 > 如何在角度中使用 [ngStyle] 中的变量？

css - 如何在角度中使用 [ngStyle] 中的变量？

问题描述

我想改变位置取决于某些事件。例如，从顶部开始的空间应该是 100px，但在按钮单击后应该是 0px

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)">
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

我想编写一些类似于

<mat-list-item class="menu-item disabled " disableRipple (click)="toggleSubmenu($event)" [ngStyle]={top: myVarilable+'px'}>
    <h3 matLine class="menu-item-text">Orchestration</h3>
  </mat-list-item>

但这对我不起作用。你有一些想法来解决它吗？

标签： cssangularng-style

解决方案

我不确定是否是您要查找的内容，但您可以在 ngStyle 中传递一个对象，因此您可以使用一个返回动态生成对象的函数。

类似的东西。

HTML

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

零件

setMyStyles() {
  let styles = {
    'top': this.user.myVarilable + 'px',
  };
  return styles;
}

推荐阅读