Question

我要更改职位取决于一些事件。例如，从顶部开始的空间应为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传递对象，因此可以使用返回动态生成的对象的函数。

类似的东西。

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]中使用变量？

3 个答案: