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

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>

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

原文由 user11768519 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

类似的东西。

HTML

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

零件

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

原文由 Giorgos Papageorgiou 发布，翻译遵循 CC BY-SA 4.0 许可协议