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]

回答

相关问题