Css 如何在angular中使用[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>

配器

---

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

我不确定这是否是你想要的，但是你可以用ngStyle传递一个对象，这样你就可以使用一个函数来返回一个动态生成的对象

差不多吧

HTML

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

---

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

[ngStyle]=“{'top.px'：MyVariable}”

---

[ngStyle]=“{'margin-top'：myVariable+'px'}”

或

[style.margin-top]=“myVariable+'px+”

将样式添加到模板文件中会让人很困惑，无法修复并在以后使用@Smolarek。“正确”的方法是为您期望的每个行为创建两个类，并通过事件更改元素的类。谢谢您的帮助。我使用了[ngStyle]='myStyle'，并在.ts文件中创建了myStyle变量：）@smolarekman，这样做更容易<代码>[style.top.px]=“MyVariable”请查看我发布的答案。

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