Question

我正在使用Angular和Spring Boot创建一个Web服务，并且正在使用cdkDrag在工作区周围放置一些图像。刷新浏览器后，我想将图像保留在相同的位置。每次拖放后，我将每个图像坐标保存在数据库中。刷新浏览器时，Router类中存储了以前的坐标：

export class Router implements Node {

  id: string;

  x: number;
  y: number;

  constructor() {
  }
}

一些html：

  <mat-sidenav-content>
    <a *ngFor="let router of routers">
      <img id="node" src="assets/images/router.png" cdkDrag (click)="updateParameters($event, router)">
    </a>
  </mat-sidenav-content>'

在这里，我想将margin-left设置为router.x +“ px”，将margin-top设置为router.y。可能吗？我尝试了style="margin-left: {{router.x}}px"，但是它不起作用。

Answer 1

您需要使用https://altalogy.com/blog/rails-6-user-accounts-with-3-types-of-roles/。

一个属性指令，用于更新包含的HTML元素的样式。设置一个或多个样式属性，指定为以冒号分隔的键/值对。关键是样式名称，带有可选的。后缀（例如“ top.px”，“ font-style.em”）。该值是要求值的表达式。将以给定单位表示的结果非空值分配给给定的style属性。如果评估结果为空，则删除相应的样式。

<some-element [ngStyle]="{'margin-left': router.x + 'px'}">...</some-element>

如何将js参数传递给CSS样式

1 个答案: