角2 [style.margin-top]

Question

私はimgの高さを取得し、margin-topからimgの高さを引く必要があります。 私は以下のコードを試してみましたが、残念ながらこれは

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

Answer 1

適切なノードのスタイルマージントッププロパティがmarginTopですが、あなたはこのようにそれを行うことはできません。コンポーネント内のスタイルにアクセスし、まずテンプレート内で使用する高さプロパティを取得する必要があります。

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

Answer 2

私の知る限りでは、あなたはディレクティブ[style.height.px]を使用してから値を取得することはできません、あなたの最良のオプションはElementRefを使用してDOMへの直接アクセスを使用して、そのheightプロパティにアクセスし、自分の計算にそれを使用している