我想通過使用樣式標簽覆蓋 css class 屬性。 動態更改樣式標簽值

Question

在下面的代碼中。 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

Answer 1

你不需要添加##使用簡單的樣式

<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}">