如何在angular中使用[ngStyle]中的变量？

Question

我想改变位置取决于一些事件。例如从顶部开始 space 应该是 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>

但这对我不起作用。你有什么解决办法吗？

Answer 1

我不确定您是否正在寻找，但您可以在 ngStyle 中传递一个对象，这样您就可以使用一个 returns 动态生成对象的函数。

类似的东西。

HTML

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

组件

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

Answer 2

你可以很简单地做到这一点。

[ngStyle]="{'top.px': myVarilable}"

否则：

[style.top.px]="myVarilable"

Answer 3

<div [ngStyle]="{'margin-top': !clicked ? '0px' : '100px'}"></div>

如何在angular中使用[ngStyle]中的变量？

How to use variable in [ngStyle] in angular?

css

ng-style

angular