無法綁定Style.Top單擊複選框的座標使用Angular2

當我點擊一個複選框，我需要得到它的座標，並使用這些作爲另一個div的頂部和左側，使我可以顯示覆選框被點擊的權利。我已抓獲的複選框單擊事件如下：無法綁定Style.Top單擊複選框的座標使用Angular2

HTML：

<input type="checkbox" [id]="item.Document.VENDOR_MAT" [checked]="isAddedInCompare(item.Document.VENDOR_MAT)" (change)="OnChangeUpdateProductCompareList(item.Document.VENDOR_MAT, $event)" (click)="onCompareClick($event)" /><label class="default-font" [attr.for]="item.Document.VENDOR_MAT" style="font-size:12px;margin-left:5px;">&nbsp;Compare</label>

打字稿：

onCompareClick(e) { 
    this.compareMessageTop = e.clientX; 
    this.compareMessageLeft = e.clientY; 
    }

這是設置值。但是，當我試圖將這些值綁定到div的風格標籤我看到了它的位置爲每複選框的座標沒有變化：

我綁定，如下所示：

<div class="compareOverflowMessage" style="margin:0 0 0 0;height:20%;width:20%;" [style.top]="compareMessageTop" [style.left]="compareMessageLeft">

我也嘗試添加

this.checkboxClicked.emit(this.compareMessageTop);

在 onCompareClick（E）

，看它是否發出頂部和ATLEAST結合是正確的，但沒有運氣。

請幫忙!! 謝謝！

來源

2016-11-15 namrata

可否請你創造它的plunkr顯示發生什麼事，你怎麼綁定風格？ – micronyks

<input type="checkbox" #cb1 (click)="calcPos(cb1)"> 
<input type="checkbox" [style.top.px]="cb2Top" [style.left.px]="cb2Left"

calcPos(element) { 
    this.cb2Top = element.offsetTop + 20; 
    this.cb2Left = element.offsetLeft + 10; 
}

來源

2016-11-15 06:28:56

非常感謝！ style.top.px＆style.left.px爲綁定工作。雖然，我正在設立一個分部的風格。但是，當我使用element.offsetTop時，我得到未定義的值，如果我嘗試element.target.offsetTop＆element.target.offsetLeft，我得到0.並且它顯示左上角的div而不是複選框的位置。我試過： this.compareMessageTop = e.clientX - e.target.offsetTop; this.compareMessageLeft = e.clientY - e.target.offsetLeft; 但這也不能給div的正確位置。請分享，如果我錯過了什麼？ – namrata

很難分辨。你能否提供一個可以複製的Plunker？我並沒有多少考慮'offsetTop'是否是正確的屬性，因爲從你的問題中不清楚究竟是什麼要求。 –

它的工作。我將e.clientX設置爲top而不是Left。和e.clientY左而不是頂！ – namrata

無法綁定Style.Top單擊複選框的座標使用Angular2

回答

相關問題