Angular 2 [style.margin-top]

我需要獲取img的高度，然後將其從img的高度減去margin-top。我想這下面的代碼，但不幸的是這沒有奏效Angular 2 [style.margin-top]

<img [style.marginTop.px]="marginTop - '[style.height.px]' "class="noteImg">

如何優雅的解決這一問題？我會很高興你的任何建議。

的完整代碼

<div class="container-fluid noteContainer" *ngFor="let data of dataPost; let i = index"> 
    <div class="noteWrapperImg"> 
     <img [style.marginTop.px]="HOW TO DO IT?" src="{{data?.image}}" class="noteImg" alt="{{data?.altImage}}"> 
     <a class="{{i%2 == 1 ? 'notePDataNotEven': 'notePDataEven'}}" [class.css]="i%2 == 1"> 
      <i class="ion-ios-clock-outline"></i> {{data?.data}} 
     </a> 
    </div> 
</div>

來源

2016-11-12 Lestoroer

我的建議是使用圖像上的'load'事件https://plnkr.co/edit/4GWddzmcOeSgmvtAdlRM?p=preview – yurzui

這是有趣的解決方案！謝謝 – Lestoroer

正確的節點的風格邊距屬性爲marginTop，但你不能像這樣做。您應該訪問組件中的樣式並首先檢索height屬性，然後在模板中使用它。

當你使用*ngFor循環，你可以通過添加一個模板變量，以圖像，並把它傳遞給一些返回其高度的方法做到這一點。像這樣：

<div *ngFor="let data of dataPost> 
    <img #img [style.marginTop.px]="getImgMarginTop(img)" src="http://image-src.png"> 
</div>

然後向您的組件添加一個返回圖像高度的方法。

getImgMarginTop(img) { 
    return img.style.marginTop - img.clientHeight 
    }

來源

2016-11-12 22:09:57

謝謝，但它不起作用 – Lestoroer

沒有注意到你試着在深夜減去'[style.height.px]'對不起）是的，@邁克爾是對的 - 你不能這樣做。你應該從你的組件拳頭訪問它。 –

似乎工作。但我有一個最後的問題。如果我運行這個代碼與console.log（） ' getImgMarginTop（img）{ console.log（img.clientHeight）; }' 然後控制檯顯示一種好色。爲什麼這個方法被調用了很多次？ http://i056.radikal.ru/1611/ba/73fb22aa6f2a.png – Lestoroer

據我所知，你不能用指令[style.height.px]獲得價值，你最好的選擇是使用到DOM直接訪問使用ElementRef，然後訪問其height財產，並在計算中使用它

來源

2016-11-13 02:14:16 Michael

我不使用，因爲img是在循環「for」。如果我必須這樣做，那麼代碼將有兩個循環。 – Lestoroer

Angular 2 [style.margin-top]

回答

相關問題