javascript - 我想通过使用样式标签来覆盖 css 类属性。动态更改样式标签值
问题描述
在下面的代码中。simple-point-box css 类生成具有拖放功能的简单框。否。的简单盒子存储在 items 数组中。在这里,我正在迭代每个包含按钮和正确值的项目。根据它我想定位每个项目的位置。我想通过为每个项目分配底部和右侧值来使用样式标签来做到这一点。请帮我。我被困住了。
<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>
我只需要根据项目包含值更改为样式标签值。这样每个项目都将根据其保存的位置进行定位
解决方案
您不需要添加##
使用简单的样式
<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}">
推荐阅读
- javascript - 对象作为Javascript中的函数参数
- amazon-cognito - 如何使用 Terraform 创建 AWS Cognito 用户
- c# - HelixToolkit 和 3d 绘图
- apache-camel - 何时在骆驼 DSL 中使用 end() 和 endChoice()
- time-complexity - 计算递归算法的时间复杂度
- php - Laravel - 事务回滚不起作用
- keras - 计算 3D CNN 的输出形状
- mysql - 带组的 SQL Rank 函数
- nativescript - 来自用户手机的自定义图库
- c++ - 为什么 c++ std 累积总是返回 0