[英]I want to override the css class property by using style tag. Change the style tag value dynamically
在下面的代码中。 simple-point-box css class 生成具有拖放功能的简单框。 否。 的简单盒子存储在 items 数组中。 在这里,我正在迭代每个包含按钮和正确值的项目。 根据它,我想 position 每个项目 position。 我想通过为每个项目分配底部和右侧值来使用样式标签来做到这一点。 请帮我。 我被困住了。
<div id="widgetspace"
class="simple-point-box"
*ngFor="let item of items"
ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
[preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" ##style="bottom: 200px; right: 300px"##>
<br>
bottom={{item.bottom}}
left={{item.right}}
</div>
我只需要根据项目包含值更改为样式标签值。 这样每个项目将 position 按照它保存 position
你不需要添加##
使用简单的样式
<div id="widgetspace"
class="simple-point-box"
*ngFor="let item of items"
ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
[preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" style="bottom: 200px; right: 300px">
如果你想要动态风格,那么你可以使用ngStyle来达到这个目的,比如
<div id="widgetspace"
class="simple-point-box"
*ngFor="let item of items"
ngDraggable ngResizable (started)="onStart($event)" (stopped)="onStop($event)" (movingOffset)="onMoving($event)"
[preventDefaultEvent]="true" (endOffset)="onMoveEnd($event,item,'widgetspace')" [ngStyle]="{'bottom': yourBottomProperty,'right': yourRightProperty}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.